CODEWITHSUNDEEP
javascriptd3.jstreelabelvisualization
user3093528
user3093528

Reputation: 11

d3 js expandable and collapsable tree structure

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

Upvotes: 0

Views: 1299

Answers (1)

VividD
VividD

Reputation: 10536

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

Upvotes: 1

Related Questions