Reputation: 565
I'm creating a horizontal D3 Icicle Chart that will be used to display a pedigree. This will only show the father/mother so each node will only ever have two children (its parents) and this will continue on until the end of that particular line.
The problem I'm running into is that some lines are longer than others and this rolls up to a greater value for its parent nodes. This value then makes that particular node height larger than the other one, since this is how Icicle charts work.
While not set up with a pedigree, this Observable shows a Zoomable Icicle Chart example: https://observablehq.com/@john-guerra/zoomable-variable-size-icicle
"vis" in the example above will always be larger than "util" because it has a larger value based on its children (and their values). What I would like to do is set each child node to be equal in height.
To further simplify this, it would mean that each child node would be 50% of the height of its parent node.
I don't want to set static/hard-coded height values as I would like this to remain responsive and would get messy with further generations being displayed.
All children must have a value so I can't set anything to be zero and with a recursive pedigree, I'm not sure how I can make all lines even with value.
Grateful for any advice or point in the right direction with this.
Upvotes: 0
Views: 76