如何在D3 Javascript中绘制一个简单的力导向图

Question

我正在学习本教程:> http://bl.ocks.org/mbostock/4062045,它基本上用于可视化D3 Javascript库中的Force_Directed图形.上面的链接也有代码和JSON文件.我有两个问题.我想要了解代码.但是,程序如何以这种方式在节点之间链接以及这些节点链接在一起的基础上？以下是链接和节点位置的代码:

force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

node.attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });
});

我的第二个问题:任何人都可以请我帮助我绘制一个非常简单的两个节点(圆圈)样本和这两个节点之间的一个链接,这样我就能理解这个图形是如何工作的,以及这个图形如何基于一个非常简单的JSON文件.非常感谢您的协助.

Answer 1

是否链接了两个节点由数据决定.特别是,它包含诸如的行

{"source":1,"target":0,"value":1}

告诉它链接哪些节点(通过索引).索引指的是数据中也给出的节点列表.此数据在此块中提供给D3:

var link = svg.selectAll(".link")
    .data(graph.links)
  .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function(d) { return Math.sqrt(d.value); });

因此,对于每个元素graph.links,line将添加一个.此时,该行没有起点或终点,因此未绘制 - 仅添加元素.然后,在模拟运行时,基于模拟的当前状态设置线的起点和终点.这是您在问题中的代码.

以下代码将绘制两个圆圈和它们之间的链接.

var svg = d3.select("body").append("svg").attr("width", 100).attr("height", 100);
svg.append("circle").attr("cx", 10).attr("cy", 10);
svg.append("circle").attr("cx", 90).attr("cy", 90);
svg.append("line").attr("x1", 10).attr("y1", 10).attr("x2", 90).attr("y2", 90);