Question

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

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

1 个答案: