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

Question

感谢前面这个问题,我使用force layout在下面生成了一个静态固定布局图d3.js:

我有两个具体的问题来进一步自定义布局:

首先,我注意到确定性地初始化节点位置(例如,在这里对角完成,详见脚本)修复了节点的位置,节点的方向似乎依赖于此初始化以及力图的尺寸*.我想知道如何使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,并确定性地沿对角线初始化节点时,所有节点和边沿输出中的对角线定位,为什么？)

Answer 1

尝试在每个刻度上添加自定义重力，将节点拉向水平线。像这样的东西：

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

对于你的第二个问题，我相信，它不是居中的，但默认情况下有一个小的重力将节点拉向中心。