D3 生成不同的形状

最新推荐文章于 2024-06-17 09:35:45 发布

飞翔蓝天-IT-NPF

最新推荐文章于 2024-06-17 09:35:45 发布

阅读量1.9k

点赞数

分类专栏： D3.js 文章标签： d3.js 形状符号

本文链接：https://blog.csdn.net/npf_java/article/details/49184659

版权

D3.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>