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

Question

我正在关注本教程：> http://bl.ocks.org/mbostock/4062045 用于在 D3 Javascript 中可视化强制有向图。上面的链接也有代码和 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; });
});

我的第二个问题：谁能帮我画一个包含两个节点（圆圈）的样本以及这两个节点之间的一个链接，以便我了解该图的工作原理。非常感谢您的帮助。

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);