The documentation states:
The treemap chart provides a method for displaying hierarchical data using nested rectangles.
Everything works fine with flat / single-depth data, but I am having trouble understanding how to make a hierarchical structure work.
I've studied the examples (sample/
directory) but they've not given me enough insight :disappointed:
Simplified, the data I have is:
- A (50% through children)
- C (25% through children)
- C1 (12.5% through children)
- C2: 12.5%
- D: 25%
- B: 50%
This should give a Treemap similar to this:
+-------+------+-------+------+
| C1a | | |
+-------+ C2 | |
| C1b | | |
+-------+------+ B +
| | |
| D | |
| | |
+-------+------+-------+------+
The only thing I have found is to keep adding groups
:
[
{"name": "A", "l0": "/", "l1": "A", "l2": "", "l3": "", "l4": "", "value": 0},
{"name": "B", "l0": "/", "l1": "B", "l2": "", "l3": "", "l4": "", "value": 50},
{"name": "C", "l0": "/", "l1": "A", "l2": "C", "l3": "", "l4": "", "value": 0},
{"name": "C1", "l0": "/", "l1": "A", "l2": "C", "l3": "C1", "l4": "", "value": 0},
{"name": "C1a", "l0": "/", "l1": "A", "l2": "C", "l3": "C1", "l4": "C1a", "value": 6.25},
{"name": "C1b", "l0": "/", "l1": "A", "l2": "C", "l3": "C1", "l4": "C1b", "value": 6.25},
{"name": "C2", "l0": "/", "l1": "A", "l2": "C", "l3": "C2", "l4": "", "value": 12.5},
{"name": "D", "l0": "/", "l1": "A", "l2": "D", "l3": "", "l4": "", "value": 25}
]
But that looks like a hack to me, which would indicate that there is probably a better way to do this?
I've got a CodePen with what I have thus far: https://codepen.io/potherca/pen/qBVXmRz
Any help would be much appreciated!
enhancement