implementing radial tree using many to many relationsip json data

185 views
Skip to first unread message

Ayush Nautiyal

unread,
Jul 14, 2022, 4:52:59 AM7/14/22
to d3-js
I am trying to implement a radial tree but the data is many to many  relationship json data can someone tell me how do I implement this .
similar to this

Sergej Matt Rinc

unread,
Aug 1, 2022, 7:09:53 PM8/1/22
to d3-js
  Hi,

there are at least 3 ways how you can recreate such chart (sorry, no code due to summer vacation yet you should find many chart examples on the web):

1. Force layout chart

The idea is to fix position (if needed) of the internal nodes (in a virtual circle) and let the other connected subnodes auto arrange.

2. Modified radial tree chart

Specifically, radial cluster might be proper too:


The trick would be to have one "fake" root node and then you would hide it and all links to first level nodes. If by default using SVG then that would be easy by just setting their opacity attribute to 0 (making them fully transparent).
And yes, adding additional links would be needed since in hiearchical charts (like tree layout is) children nodes usually have only one parent node etc.

3. Some more twisted implementations

Any approach that would practically ressemble your chart though with more scripting required than #1 and #2. Like a radial force chart:


but with added link drawing (using code) for all connections etc.

  That inner circle with the Forrests text element and background pattern would be somehow trivial to add using D3.js.

  Hope you get some creative juices going from above, just think a little outside the (SVG) box. :-)

  Matt Sergei

Shahar Zeevi

unread,
Aug 2, 2022, 7:23:37 AM8/2/22
to d3...@googlegroups.com
Thank you very much for your help. 

Really appreciate it.

Shahar

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/9fea2e65-61ea-48fe-9136-12c80e930364n%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages