mhkeller/layercake

Collapsible tree

Closed this issue · 3 comments

matzhaugen commented

Hey guys, I was wondering if it would be possible to make something like D3's collapsible tree with Layercake, and if so how?

Thanks!

mhkeller commented

Definitely a complex example since it has a lot of animation in it. Its ability to auto-expand the height based on the contents is not very layercake-y since the idea with layercake is that the user defines the box that the chart renders in. It's not impossible to have the contents broadcast up to the the parent element but it's just something that the library doesn't do for you.

If I were you, I would:

  1. Separate out what are the data variables / data functions and what are the D3-select-based HTML functions.
  2. Figure out the reactivity and which variables should be svelte reactive variables with $: or re-assigned on some change
  3. Convert the D3-select HTML functions to markup in a svelte component and add the data from step 2

I wouldn't try to handle all of the animations in the first version. I'd have it so that it just shows the tree. Once you have that working, dig into the svelte animation docs about how to do those in a sveltey way. Let me know what you end up with.

matzhaugen commented

Thanks @mhkeller , I'll take a look, and see what I can conjure up :) . Perhaps I can get away with just using svg native components as a v1.

mhkeller commented

@matzhaugen I'm going to close this for now but if you end up with something working, please do post a link here. Could be a good addition to the examples gallery!

  • 👍1