d3.js - 定心力偏移力图 d3js v4

Question

我有一个简单的力图，如下所示：

在图片中，我们可以看到节点沿着 x 轴很好地对齐，中间（黑色）节点的左侧和右侧有一个 100 像素的小缓冲区。这由 2 个尺度处理：

1. 左刻度范围（10，宽度/2 - 100）。10 从边缘给出一个小的填充。
2. 带范围的右刻度（宽度/2 + 100，宽度 -10）。

中间节点的位置为(width/2, height/2)。红色和绿色节点的 x 位置由右/左刻度以及底部的轴处理。

以上工作正常，直到我添加

.force("center", d3.forceCenter(width / 2, height / 2));

根据我的力定义，结果是：

它将图片向左偏移 x 量。这是为什么？

节点附加到的 svg 元素没有任何 CSS 样式（填充或边距），也许应该？我在这里想念什么？

更新：

这是有同样问题的小提琴。您可以看到左右节点稍微偏离了它应该在上面的数字。如果您将第 40 行注释掉，则偏移量不再是。将这些放在一起时，我意识到问题可能在于我的图表的 svg 是如何构建的。目前它的

svg
 |
 - g.nodes
 - g.links
 - g.axisleft
 - g.axisright

节点被附加到 g.nodes 元素中。

标签： d3.js

Answer 1

它是节点的重心

图表中心 X 为 400。

节点位置是

• x1=168.68
• x2=388.68
• x3=642.68

差到 400

• x1= -231.32
• x2= -11.32
• x3= 242.68

如果你把它们加起来，它非常接近于 0。