d3.js中的图形方向和节点定位

Question

感谢之前这个问题，我使用d3.js中的力导向布局生成了下面的静态固定布局图表：

我有两个具体的问题需要进一步定制布局：

首先，我注意到确定性地初始化节点位置（例如在这里对角线完成，请参见script以获取详细信息）会固定节点的位置，并且节点的方向似乎取决于此初始化以及力图的维度*。我想知道如何使上面的图中的节点A，D，E，F，I 水平对齐？换句话说，我想将图的方向逆时针旋转大约45度。我已经尝试在中间水平初始化节点：

nodes.forEach(function(d, i) { d.x = w / size * i; d.y = h / 2; });

但是生成的输出结果中，所有节点和边都水平地位于它们被初始化的位置。

其次，力导向图是否自动居中在svg元素内？如果不是，我们该如何实现？如果是，我们该如何指定一个中心点让力导向图在svg元素内居中？

（*注意：奇怪的是，当为力导向图设置.size([w, h])，其中w = h，并确定性地沿对角线初始化节点时，所有节点和边都会在输出中沿着该对角线定位。为什么？）

- MLister

Answer 1

尝试添加自定义重力力量，每个时刻应用于节点，将其拉向水平线。类似这样的东西：

force.on('tick', function(e) {
  nodes.forEach(function(d) {
    d.y += (height/2 - d.y) * e.alpha;
  });
})

针对您的第二个问题，我认为它不是居中的，但是默认情况下存在一个小重力作用，可以将节点朝向中心拉拽。

- Ilya Boyandin