The spacing argument is for extra space between siblings or the tree-levels ?

[karlitos]

Hello,

I am trying to implement an "horizontal" flextree layout. So far so good, after I switched some x and y coordinates. I would like to add some extra separation between the parent nodes and the children nodes. So I introduced the spacing parameter. It looks to me, that this adds only spacing between the siblings, not between the tree levels.

This is how my chart looks like with spacing 0.

This is how my chart looks like with spacing 50.

In the flextree example it looks like the spacing is only between the "sibling" nodes. How can I achieve extra tree-level spacing without introducing some opaque container workaround ?

[karlitos]

I was able to set some extra tree-level spacing by using
nodes.forEach(function(d){ d.y = d.y + d.depth * FLEXTREE_SPACING });
Thought, it would be nice to have the spacing included in the computed layout.

This was a mistake. The originally computed layout does not take ein account the Re-computing of the X/Y values in a loop afterwards. Doing this led to overlapping nodes of distant some sub-trees with many children on one level.

[karlitos]

Another approach: add the tree-level spacing in the nodeSize function
nodeSize: function(node) {return [node.data.size[0], node.data.size[1] + FLEXTREE_SPACING]},
You need to subtract it whenever you want to draw a node with the actual size. The downside of this is, that your xSize/ySize respectively will not reflect actual size. A solution for this may be a function computing the real size attached to the prototyping chain.

[sanket03]

@karlitos
I am also trying to create a horizontal flextree but it seems that it is not flex at all...The nodes are overlapping each other...I am providing the size attribute as required..Is there any other setting I need to make to make it work?

[sanket03]

I got it working.
I have used another approach for applying tree level spacing.
shift the x-coordinate for your rect as x + flextree_spacing * depth_for_node

[michaeljohansen]

Just want to turn @sanket03 's comment into code for future travelers:

const tree = {size:[100,100],children:[{size:[100,100]},{size:[100,100]}]};
const horisontalSpacing = 100;
const verticalSpacing = 100;

const layout = d3Flextree.flextree().spacing((nodeA, nodeB) => nodeA.path(nodeB).length + horisontalSpacing);
const flexyTree = layout.hierarchy(tree); // Prepare our tree
layout(flexyTree); // Call the D3 Flextree layout to add X/Y coords to our tree

flexyTree.each((node) => {
  node.y += node.depth * verticalSpacing;
});