Quite new with d3 but have been stuck on this for several weeks and figured I'd ask here
I've been trying to create a radial/flare tree using React-Flow but I'm having a really hard time with positioning the nodes. I need to use React-Flow because I'd like to use custom React components instead of the standard SVG nodes from d3 since I need a higher fidelity interaction with the nodes.
Essentially I'm looking for something like this attached image but using React-Flow: Source: https://observablehq.com/@d3/radial-tree
I don't even need the radial curve lines- it's more of a nice to have. As long as I can get the nodes in the correct circular position, even straight lines are fine.
Would love any advice :)
Here's what I've got so far: https://codesandbox.io/s/trusting-leavitt-b8uxi9-rf-expand-collapse-forked-fh71v8?file=/src/App.tsx:948-954
It's the collapsible tree example that the React-Flow devs gave on their website
The closest example of a radial tree using d3 using v4 or above is this: https://medium.com/analytics-vidhya/creating-a-radial-tree-using-d3-js-for-javascript-be943e23b74e
- I'm trying to apply the logic that the author used in their example but the nodes aren't positioning correctly, probably due to my shallow understanding of how to use d3
There are a few other examples on here/codepen that creates a radial tree using d3 but they're all v3 or below and are focused around using SVGs as the nodes
I've also seen other radial trees from other React libraries like this: https://codesandbox.io/s/ov2jokvl1z But they all use SVG nodes which won't work for me because I'd like to use React nodes within the graph