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

【问题标题】：Graph orientation and node positioning in d3.jsd3.js 中的图形方向和节点定位
【发布时间】：2012-08-08 04:38:51
【问题描述】：

感谢之前的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]) where w = h 并确定性地沿对角线初始化节点时，所有节点和边都沿输出中的对角线定位，为什么？)

【问题讨论】：

标签： javascript svg graph d3.js force-layout

【解决方案1】：

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

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

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

【讨论】：