search

ErikGartner / dTree

A library for visualizing data trees with multiple parents, such as family trees. Built on top of D3.
https://treehouse.gartner.io/ErikGartner/58e58be650453b6d49d7
MIT License
521 stars 139 forks source link

Weird spacing between nodes #15

Open ErikGartner opened 8 years ago

ErikGartner commented 8 years ago

Fix spacing between married couples.

ErikGartner commented 7 years ago

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

piyushparkash commented 7 years ago

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 commented 7 years ago

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 commented 4 years ago

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!

ErikGartner commented 4 years ago

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

glostis commented 3 years ago

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 https://github.com/ErikGartner/dTree/issues/15#issuecomment-298983764:

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?