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

Question

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

7

我将跟随这个教程：> 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; });
});

我的第二个问题是：能否有人帮忙画出两个节点（圆圈）和这两个节点之间的一条链接的示例，以便我理解这个图形是如何工作的。非常感谢您的帮助。

- Mod

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lars Kotthoff · Accepted Answer

节点之间是否连接取决于数据。特别地，它包含如下行：

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

这段代码告诉D3.js哪些节点需要连接，通过节点的索引来标记。索引是指在给出的数据列表中的节点索引。以下是将此数据传递给D3.js的代码块：

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