Alignment of nodes on d3.js graph

Question

Please see http://jsbin.com/okUxAvE/28. Then click on query. Notice how the children start displaying at the same level as query. Now pan down to methods (a child of query) and click this one to expand it. Note how the children of method expand differently, almost from the center. This seems to be the behaviour when there are no more children.

How can I get these children to expand the same way that the children of query expand?

I'm pretty sure the problem is in the following code (I think), but I still can't find the culprit. I just can't see how the last set of children would be different.

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

score 3 · Accepted Answer · answered Jun 17 '14 at 13:37

On each new level of nodes you account for the y offset of the current node from the parent and the y offset of the parent from the grandparent. You don't, however, account for the total yoffset from the top of the graph (or the first node).

Carry the Y offset like this:

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

Alignment of nodes on d3.js graph

1 Answers1