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:

enter image description here

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

No correct solution

OTHER TIPS

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)


enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top