javascript - d3.js 图上的节点对齐

Question

请参阅http://jsbin.com/okUxAvE/28 .然后点击查询。请注意子项如何在与 query 相同的级别开始显示。现在向下移动到 methods(query 的子项)并单击它以将其展开。请注意 method 的子项如何以不同方式展开，几乎是从中心展开的。这似乎是没有更多 child 时的行为。

我怎样才能让这些子项以与 query 的子项相同的方式展开？

我很确定问题出在下面的代码中(我认为)，但我仍然找不到罪魁祸首。我只是看不出最后一组 child 会有什么不同。

var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);

nodes.forEach(function(d) { //iterate through the nodes
  if(d.parent){ //if the node has a parent
    for(var i = 0; i < d.parent.children.length; i++){ //check parent children
      if(d.parent.children[i].name == d.name){ //find current node
        d.yOffset = i; //index is how far node must be moved down
        d.parentYoffset = d.parent.yOffset; //must also account for parent downset
      }
    }
  }
  if(d.yOffset === undefined){ d.yOffset = 0; }
  if(d.parentYoffset === undefined){ d.parentYoffset = 0; }
  d.x = (d.yOffset * 40) + (d.parentYoffset * 40) + 20;
  d.y = d.depth * 200;
}); 

Answer 1

在每个新级别的节点上，您要考虑当前节点与父节点的 y 偏移量以及父节点与祖父节点的 y 偏移量。但是，您不考虑从图形顶部(或第一个节点)开始的总 yoffset。

像这样携带 Y 偏移量:

var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);

nodes.forEach(function(d) { //iterate through the nodes
  if(d.parent){ //if the node has a parent
    for(var i = 0; i < d.parent.children.length; i++){ //check parent children
      if(d.parent.children[i].name == d.name){ //find current node
        d.yOffset = i; //index is how far node must be moved down
        d.parentYoffset = d.parent.yOffset; //must also account for parent downset

        if (d.parent.parentYoffset) {
            d.parentYoffset += d.parent.parentYoffset;
        }
      }
    }
  }
  if(d.yOffset === undefined){ d.yOffset = 0; }
  if(d.parentYoffset === undefined){ d.parentYoffset = 0; }
  d.x = (d.yOffset * 40) + (d.parentYoffset * 40) + 20;
  d.y = d.depth * 200;
});