D3力布局：单独定位第一个和最后一个节点

Question

我想创建一个静态力导向布局，如本例所示：http://bl.ocks.org/mbostock/1667139，但第一个和最后一个节点锚定在 window 的每一侧（与例如，我的图表不是圆形的）。这样我就可以清楚地看到图表的起点和终点，也希望能够给它一个更线性的构象。到目前为止，我已经尝试为这两个节点分配不同的类，然后给那些类固定坐标，例如：

svg.select(".first")
  .attr("cx", function(d) { return 10; })
  .attr("cy", function(d) { return height/2; })

svg.select(".last")
  .attr("cx", function(d) { return width-10; })
  .attr("cy", function(d) { return height/2; })

不过好像不行，这两个节点刚好坐在window的右上角。有什么想法吗？

Answer 1

在 for 循环和 force.stop() 之间放置以下代码对我来说似乎工作正常。

var nodes = force.nodes();
nodes[0].x = 10;
nodes[0].y = height/2;

nodes[nodes.length-1].x = width-10;
nodes[nodes.length-1].y = height/2;

这里有一个 Fiddle 展示了这一点。您可能还想查看 fixed 属性，这可能有助于实现您正在寻找的行为。

D3力布局：单独定位第一个和最后一个节点

D3 force layout: individually positioning first and last node

d3.js

position

nodes

force-layout