Question

我正在创建力导向树（这与常规的树形布局不同！）。到目前为止，我已经有了一个基本的力导向图，但是我想根据它们与根节点的距离来计算每个节点的深度，然后将它们引向特定的y轴并指向该深度。

我希望它看起来类似于示例here

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

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

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

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是here。它在第70行特别中断

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

D3力导向树的节点深度

0 个答案: