d3 js expandable and collapsable tree structure

Question

I am trying to generate a expandable and collapsable horizontal tree structure for showing execution time of some groups.

Here is my structure of data

Group1 - Artifact1 - time taken - Artifact2 - time taken to execute . . . Group2 - Artifact3 - time taken - Artifact4 - time taken . . .

Ideally I want to display all groups as Rectangles and when user clicks on one rectangle(group) it should expand all artifacts.

I am looking into this example: https://github.com/lbrucher/d3-tree-heatmap:

The issue with this example is when I have more groups, the page expand crazily and labels inside boxes disappear. Also I have around 30 groups so want to display 4 or 5 boxes per row

Can some help me on providing some ideas on this issue

Answer 1

Maybe you can create two diagrams of the tree that you want:

• one that displays all labels clearly, but doesn't fit in the screen (its width is much larger than screen width):

• another that fits the screen, but doesn't display labels.

And then you allow user to scroll down the second diagram, similar to this example: (ofcourse, in your case, diagrams will look differently)

---