居中力偏移力图D3JS V4

Question

我有一个简单的力图，看起来像这样：

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

1. 左刻度，范围为（10，width / 2-100）。 10会给边缘带来少量填充。
2. 右刻度，范围为（宽度/ 2 + 100，宽度-10）。

节点在中间的位置是（width / 2，height / 2）。红色和绿色节点的x位置由左右比例以及底部的轴控制。

在我添加之前，以上方法都可以正常工作

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

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

它将图片向左偏移x倍。为什么会这样？

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

更新：

Here is Fiddle遇到相同的问题。您可以看到左右节点略微偏离其应位于其顶部的数字。如果您要注释掉第40行，则偏移量将不再存在。 放在一起的同时，我意识到问题可能出在我的图表的svg的构造上。目前，它的

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

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

Answer 1

它是节点的重心

图表中心X为400。

节点位置是

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

区别于400

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

如果将它们加起来，则非常接近0。

Answer 2

强制布局不一定保证节点将以给定的起始坐标结束。您正在向节点施加多个力，并且节点的最终位置基本上是所有这些力叠加的结果。

在您的情况下，最终排名是forceCenter和force.X之间互动的结果。您可以删除其中一个，然后看看另一个单独工作。

解决您的问题的一种方法是使用forceCenter的对称性质：

.force('x', d3.forceX().x(function(d) {
    if (d.cl === 0)
        return width / 2;
    if (d.cl < 0)
        return xScale_lo(-5);
     return xScale_hi(5); //instead of 6

我不确定当节点数增加时这将如何工作。如果目标是分离节点的群集，则可以尝试使用cluster forces。