javascript - How can I construct a tree using d3 and its force layout? - Stack Overflow

admin管理员组

文章数量:1347701

I am trying to arrange my nodes in the form of a tree. For now, I am working off of this example from here. Currently, I am relying on a force directed layout but am trying to modify it such that I can obtain a tree with predetermined number of levels i.e. if a node belongs to a particular "Layer" it should belong to the same area as other nodes in the layer.

I have tried to explain more in the picture below but does anyone have any suggestions for this? Are there any predetermined algorithms inside d3 that do this or can be tweaked to achieve this?

I am trying to arrange my nodes in the form of a tree. For now, I am working off of this example from here. Currently, I am relying on a force directed layout but am trying to modify it such that I can obtain a tree with predetermined number of levels i.e. if a node belongs to a particular "Layer" it should belong to the same area as other nodes in the layer.

I have tried to explain more in the picture below but does anyone have any suggestions for this? Are there any predetermined algorithms inside d3 that do this or can be tweaked to achieve this?

• javascript
• algorithm
• graph
• d3.js
• force-layout

Share Improve this question Follow edited Jun 3, 2014 at 11:16 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked Mar 15, 2012 at 0:45 LegendLegend 117k123123 gold badges284284 silver badges406406 bronze badges 4

• The source contains an example for a dynamic tree. You should have a look at it, it might be what you want (at least it looks similar). edit: I mean this example. – Felix Kling Commented Mar 15, 2012 at 0:47
• 1 Is there a reason you're using a force-directed layout here instead of a static tree layout, e.g. bl.ocks/1061834 ? – nrabinowitz Commented Mar 15, 2012 at 0:48
• @nrabinowitz: +1 Thank you. Can't believe I missed it! I guess both will serve my purpose! Is there a way I can make them interactive so that the nodes just e back when I drag them somewhere? This helps drag some node and explain it to someone. – Legend Commented Mar 15, 2012 at 0:55
• @FelixKling: +1 Thank You. I had one additional question that I wrote above. – Legend Commented Mar 15, 2012 at 0:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

Your diagram looks nearly identical to this example which uses a custom gravity force based on the depth. There's another example using a custom force which attracts to the parent node. These are both from my talk on force layouts.

Of course, force layouts are only one option—and as @nrabinowitz said there are many more hierarchy layouts. You can find more interactive hierarchy examples in my SVG Open talk.

The examples that mbostock referred to are here: https://mbostock.github.io/d3/talk/20110921/#20 You can inspect the HTML to see the Javascript code.

本文标签： javascriptHow can I construct a tree using d3 and its force layoutStack Overflow