Weird spacing between nodes

[erikgartner]

Weird spacing between nodes

[ErikGartner]

Hi @thomashogema,

I have to admit I have forgotten exactly why this happens. For some reason the d3 tree layout spaces the nodes very weirdly.
To debug I would make the marriage nodes visible and the look into the layout code in d3 to see for which cases it decides to add extra space.

/Erik

[ErikGartner]

Preliminary investigation shows this might be fixable by removing the marriage nodes and positioning married couples next to each other.

[piyushparkash]

Hi @ErikGartner,

I am facing this issue. I have been reading the code for some time now but not able to get how to go with it. Can you guide me a little on how to go with it.

Regards,
Piyush

[ErikGartner]

Hi @piyushparkash,

Are you looking for an explanation on how dtree works so that you can understand the code?
In short:

1. dTree converts the given graph (json object) into a d3 tree-graph by inserting hidden nodes representing things as marriages etc.
2. After this is done the modified graph is fed into d3 along with custom code for callbacks, styling and other d3 settings.

To see how the graph really looks you can disable the hiding of the nodes with the hidden attribute.

/Erik

[thomashogema]

Hi @ErikGartner,

We think we are experiencing the same issue - is this issue referring to nodes of a married couple that get pushed apart because of the spacing required for their children?

If so, could you elaborate on what you suggested after your preliminary investigation? Thanks!

[glostis]

Hi all,

I am facing the same issue as the previous commenters, and can provide a minimal example that showcases the problem https://jsfiddle.net/zyxk73te/. In that example, you can see that the 1rst and 4th "Generation 2" couples are quite asymetrical, whereas the 2nd and 3rd couple are fine.

The code for the d3.tree layout seems to be here but it is a bit too obscure for me to gather any meaningful information...

I'd also like to point out that I've found another d3.tree "wrapper" to make family trees: https://github.com/trongthanh/family-tree
It uses a horizontal layout instead of a vertical one so things are admittedly quite different, but it does not seem to suffer from the same problem when I feed it the same data as in the example JSFiddle above.
I didn't dig really deep in his code because it is quite different from dTree's code, but I found this section where he sets a custom tree.separation() function which is a bit more involved than the one used in dTree. Could that be a direction to look into?

@ErikGartner regarding the other solution you pointed out in #15 (comment):

Preliminary investigation shows this might be fixable by removing the marriage nodes and positioning married couples next to each other.

How exactly would you go about doing that?