D3 强制布局：适合页面上的所有内容？

Question

编辑：不确定如何将 pack 与 force 结合起来，但这可能是一个解决方案

我昨天开始处理 D3 可视化，但无法让所有内容都适合屏幕。

有时事情会脱离屏幕，有时半圈在屏幕上，一半在屏幕外。

这是一个可以查看可视化的链接

http://codepen.io/anon/full/unkFc

这是实际代码

http://codepen.io/anon/pen/unkFc

我认为问题可能是我使用窗口大小作为维度，但可视化可能没有显示在整个窗口中？

请注意，我有 codepen，因为我需要它在 IE8 中工作，而 JSFiddle 不支持它

Answer 1

我认为问题在于空间的元素太多。如果它们要适合屏幕，它们就会重叠。

您可以使用 force.gravity() 和 force.size() 来尝试找到完美的平衡。请参阅：http://tributary.io/inlet/5817500（与第 73 和 74 行混淆）

您还可以通过圆圈数和窗口大小来缩放圆圈大小，这样无论这两个参数如何，布局的空间都是相同的。

类似

.attr("r", function(d) { 
    return d.count/nodes.length * Math.min([width,height])/someScaleFactor;
})