Collapsible tree example

I derived a simple example from https://vx-demo.now.sh/trees available here: https://codesandbox.io/s/n3w687vmqj

I’m not overly happy with the forceUpdate() and would like to have it animate similar to https://bl.ocks.org/mbostock/4339083, but it’s a start

[techniq]

@hshoff @sghall I’ve made some progress using react-move to animate the expand/collapse animations of a <Tree /> after the render prop was exposed (thanks again @hshoff )

There is still some work to do:

• Animate the links (source, target)
• Investigate using d3.linkVertical / d3.linkHorizontal as a custom interpolator for nodes so they slide along the link paths instead of a straight line
• Cleanup the example and probably refine the approach (not using this.forceUpdate(), etc)

I currently have it running locally but can move it out to codesandbox.io once a new version of vx-hierarchy is released (I couldn’t figure out how to use a git sha version on codesandbox, and also struggled locally with the same, but ended up getting npm link to work and have been tweaking the vx-demo for Tree).

I don’t know if I’ll get much more time to iterate on this till next week so once I get it on codesandbox, feel free to fork and tweak if you want.

[techniq]

I created a radial tree example derived from the cartesian layout version and based on the Radial Tidy Tree d3 example

The only changes needed to support this layout was to:

• Translate the main group within Tree to the center (i.e <Group top={width / 2} left={height / 2}>)
• Use LinkRadial from @vx/shape instead of LinkHorizontal for links
• Use pointRadial from d3-shape to translate the each node’s x/y to the radial layout. I also used a simple function to return an {x, y} object instead of an array of [x, y]

This example also has the same quirks/issues as mentioned in previous comment, but so far I’m really enjoying using vx and react-move together.