Indented, collapsible tree with + boxes, icons and labels

D3
1

Hi,

I want to build a D3 collapsible indented tree that looks like old-school type file explorer tree, with:

  • plus/minus marks in boxes to indicate collapsible/expandable
  • gridlines makring the indents
  • icons/images at the end of each line
  • labels to the right of each icon/image
  • labels on the links if possible

image
Most of the current D3 implementations seem to have either an icon, or an expansion plus/minus, not both.

Can anyone help please?

There are some similarities here with @Lao version, but i need more capabilities, can anyone help please?
Collapsible Indented Tree / Lao | Observable (observablehq.com)

2

If it doesn’t have to be D3 you could try to adapt

There are also a ton of JS implementations (many implemented as jQuery plugins though), including full-blown file manager solutions.

3

hey that looks cool, thanks for the suggestion, although i have zero competence in CSS unfortunately.

But how can i include the icon and collapse/expand rectangles as well?

4

I think li:after might be the best place. You can drop the border and instead add multiple backgrounds so that you’d have one repeating background for the dotted line, and one non-repeating for the +/- icon. The file icons I’d perhaps include in the spans (either as images or via CSS).

However, if CSS isn’t your forte I’d also consider looking for existing TreeView libraries.

1 Like
5

bummer, i was hoping to convince you to add those small changes for me, hahaha, but thanks for the advice

6

Perhaps some enterprising soul could figure out how to combine these two examples…

Edit: Ah, I guess that’s exactly what Lao did here.

1 Like
7

hey, thanks for the comment, is there a way to add icons to to what @Lao did? How can i have an icon next to the label, yet still retain the expansions/collapsing boxes?

The aim is to use the cybersecurity icons in this force graph Try 5 / brettforbes | Observable (observablehq.com) and rearrange some subsets in a hierarchical way.

So what i really need to do is to add icons to @Lao 's starting point, and then have a label to the right of the icon. Can you explain or direct me in what to do please? I am no guru, but I will have a go.

Is it simply a matter of attaching the image to each node and then fiddling with horizontal offsets to get the right visual look? Its the method i should use that is a bit of a mystery. Is it really just as simple as adding the extra element, and then getting the offsets right?

Please instruct me. Thanks

P.S. By the way, congrats on your many year coherent vision, d3 is a triumph, and the release of the Observable Framework is really huge, imho. I mean ideally you guys would seriously extend some algorithms, particularly in the force graph area (e.g. constraints, groups, isometric layers etc), but it is still a brilliant intellectual edifice, and i wanted to take this opportunity to thank you for it!!