d3.js 图上的节点对齐答案

【问题标题】：Alignment of nodes on d3.js graphd3.js 图上的节点对齐
【发布时间】：2014-06-17 13:09:07
【问题描述】：

请参阅http://jsbin.com/okUxAvE/28。然后点击query。注意孩子们是如何开始在与query 相同的级别显示的。现在向下平移到methods（query 的子级），然后单击这个展开它。请注意method 的孩子如何以不同的方式扩展，几乎从中心开始。这似乎是没有更多孩子时的行为。

我怎样才能让这些孩子像query 的孩子一样展开？

我很确定问题出在以下代码中（我认为），但我仍然找不到罪魁祸首。我只是看不出最后一组孩子会有什么不同。

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;
});

【问题讨论】：

标签： javascript d3.js tree

【解决方案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;
});

【讨论】：