如何在D3JavaScript中绘制简单的力定向图

我遵循本教程：>在D3JavaScript中可视化力定向图。上面的链接还有代码和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; });
});

---

我的第二个问题：谁能帮我画两个节点（圆）和这两个节点之间的一个链接的样本，这样我就可以理解这个图是如何工作的。非常感谢您的帮助

两个节点是否链接取决于数据。特别是，它包含以下行：

{"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

中的每个元素，将添加一行

。此时，直线没有起点或终点，因此不会绘制它——只添加元素。然后，在模拟运行时，根据模拟的当前状态设置线的起点和终点。这是您在问题中使用的代码

下面的代码将绘制两个圆以及它们之间的链接

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

谢谢你的解释。你认为我可以创建圆，然后在创建链接后将它们链接在一起吗？这可能吗？您可以随时创建链接它们的行。请记住，数据节点和链接与SVG节点和链接之间有区别。