D3.js Tree Overlap

Question

As conveyed in the following picture, I have this tree where the nodes, which aren't siblings, overlap:

You can see that 'Why 1' overlaps with 'Factor 1'. It overlaps because the last node of a branch appears to the right of a dot, but a node will appear to the left of the dot if that node has children. Also, it overlaps because when spacing out the nodes, it only spaces it out with the nodes siblings.

How do I specify that the last node of a branch should appear to the left of the dot? Or how do I specify that two neighboring columns of nodes should be spaced out as if they were in the same column?

Here is the original code

If going through the flipping the node route, this link is similar to what I want, but I want all nodes to be to the left of a dot. Can anyone suggest how to do this please?

score 0 · Accepted Answer · answered Feb 23 '18 at 12:26

The part that controls the text placement is this:

  nodeEnter.append("text")
    .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
    .attr("dy", ".35em")
    .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
    .text(function(d) { return d.name; })
    .style("fill-opacity", 1e-6);

The properties x and text-anchor control the text placement on left on right. They check if the node has children and place on each side accordingly. We can do something like this to put all text to the left:

  nodeEnter.append("text")
    .attr("x", -10)
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .text(function(d) { return d.name; })
    .style("fill-opacity", 1e-6);

Here you have a bl.ocks example and the associated gist

Please, next time share with us what have you tried.

Thank you, this pointed me in the direction to fix my problem. I set the x attribute to a small number and it moved the childless nodes to the left of the dot/circle. — user5903386, Feb 23 '18 at 17:35

D3.js Tree Overlap

1 Answers1