javascript - D3 Force-Directed Tree Set 节点深度

Question

我正在创建一个强制导向的树（这与普通的树布局不同！）。到目前为止，我有一个基本的力导向图，但我想根据每个节点与根节点的距离来计算每个节点的深度，然后让它们朝着该深度的特定 y 轴引力。

我希望它看起来类似于此处的示例

我已经知道我必须修改我的数据以具有如下层次结构：

var children_data = {
    "id": "A", 
  "children": [
    {"id": "G"},
    {"id": "E"},
    {"id": "C"},
    {"id": "H"},
    {"id": "B", 
    "children": [
        {"id": "F"},
        {"id": "D"},
    ]},
  ]
}; 

但除此之外，我还缺少一些东西。我确实尝试将以下内容添加到我的刻度函数中（在此之前展平我的源数据并尝试添加深度）：

var ky = 1.2 * e.alpha;
    links.forEach(function(d, i) {
      d.target.y += (d.target.depth * 120 - d.target.y) * ky;
    });

并将深度添加到每个节点，其中节点被定义为 flattened(children_data)：

  function flatten(json) {
  var nodes = [];
  function recurse(node, depth) {
    if (node.children) {
      node.children.forEach(function(child) {
        recurse(child, depth + 1);
      });
    }
    node.depth = depth;
    nodes.push(node);
  }
  recurse(json, 1);
  return nodes;
}

但是我一直在树布局上遇到错误。我非常基本和破碎的 JSFiddle 在这里。它特别在第 70 行中断，

var links = d3.tree().links(flatten(children_data));

标签： javascriptd3.jsforce-layout