d3.js图上的节点对齐

Question

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

我怎样才能让这些孩子扩展的方式与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; 
}); 

Answer 1

在您的帐户用于y从父当前节点和Y从祖父母父母的偏移偏移节点的每一个新的水平。但是，您不会考虑图形顶部（或第一个节点）的总偏移量。

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