D3js画图 layout 布局，节点显示到svg元素中央

https://stackoverflow.com/questions/9901565/charge-based-on-size-d3-force-layout?answertab=oldest#tab-top

D3js画图，force layout布局，得到的节点图可以显示在svg元素的中央，可是切换数据源之后，再次画出的图总是跑到屏幕外面去，于是，网上搜了一下，看到了这个帖子。按照回答中的操作，问题解决。

11 down vote favorite

7

I'm trying to make a force directed graph using d3.layout.force, and I need the container to be resizable - that is I'd like to be able calculate appropriate charge and linkDistance values based on the size, or have d3 do it for me in some magical way.

I've made an attempt (link: http://jsfiddle.net/VHdUe/6/) which only uses nodes. I'm setting the charge to a value that's based on the number of nodes that would fit across the radius of the circle that it tends to be shaped like.

The solution works for some middle-sized containers, but if you click resize a few times, you can see it doesn't really work for all sizes...

The only way forward I can see is using an svg scale transform, which will mess up the size of my elements unfavorable. Any other options?

PS: I have seen http://mbostock.github.com/d3/talk/20110921/bounding.html (the answer to D3 force directed layout with bounding box), but I'd rather have a gravity-based solution than a bounding box one.

graph d3.js force-layout

share|improve this question

edited Jan 27 '14 at 11:55 VividD 7,24253281

asked Mar 28 '12 at 5:20 XwipeoutX 1,92431636

bl.ocks.org/mbostock/1129492 – weltschmerz Jan 27 '16 at 4:46

add a comment

1 Answer

active oldest votes

up vote 17 down vote accepted

In addition to charge and linkDistance, you also have gravity. If you want the graph to maintain the same relative density to the layout size, then you'll want to scale both charge and gravity. These are the main two computing forces that determine the overall size of the blob. See my force layout talk for more details. I tried a few different versions, and this one seemed to work pretty well: var k = Math.sqrt(nodes.length / (width * height));layout .charge(-10 / k) .gravity(100 * k) Here nodes.length / (width * height) is linearly proportional to the graph density: the area of the nodes divided by the area of the layout. The charge force follows the inverse-square law, so that might explain why the square root works well. D3's "gravity" is a virtual spring that scales linearly with distance from the layout center, so this also increases the gravity as the graph becomes denser and discourages nodes from escaping the bounding box.