D3 生成不同的形状

关注

原创最新推荐文章于 2026-09-22 12:51:29 发布 2k 阅读 AI 写同款· GEO 优化 ›

关于D3画流程图-节点悬浮提示信息和节点形状的设置最近开发项目需要根据后台数据动态画出流程图，因此了解折磨了一点点D3，官网资料和案例好像比较少说明，经过这些天的挖地三尺地找网上资料，终于折磨出了一点点东西。以下是本人这里的一个小demo,希望对有需要的朋友有帮助吧。（例子有点粗糙，仅是为了有个效果而已，实际中应根据数据来正确规范的显示流程图） <!DOCTYPE html> <html lang="en"> &lt... 阅读详情

<!DOCTYPE html>

<meta charset="utf-8"><body><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script><script>var w = 960,
    h = 500,
    nodes = [],
    node;

var vis = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

var force = d3.layout.force()
    .nodes(nodes)
    .links([])
    .size([w, h]);

force.on("tick", function(e) {
  vis.selectAll("path")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});

setInterval(function(){// Add a new random shape.
  nodes.push({
    type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)],
    size: Math.random() * 300 + 100
  });

  // Restart the layout.
  force.start();

  vis.selectAll("path")
      .data(nodes)
    .enter().append("path")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .attr("d", d3.svg.symbol()
        .size(function(d) { return d.size; })
        .type(function(d) { return d.type; }))
      .style("fill", "steelblue")
      .style("stroke", "white")
      .style("stroke-width", "1.5px")
      .call(force.drag);

}, 1000);

</script>