如何在d3

Question

在动画圈中打包d3图表，如https://bl.ocks.org/HarryStevens/54d01f118bc8d1f2c4ccd98235f33848

气泡总是会变大以填充矩形绘图画布。有没有办法确定尺寸是否一致，以便我可以使气泡变小？

同时因为它会向上扩展，即使传递较小的值，半径也不会真正变小。

例如：如果数据从[{“a”，40}，{“b”，50}，{“c”，60}]切换到  [{“a”，4}，{“b”，8}，{“c”，10}]，理想情况下，圆圈按比例缩小。

如何控制规模？感谢。

Answer 1

d3.pack()有一个名为size的方法。根据API：

  

如果指定了size，则将此包布局的大小设置为指定的两个元素数组[width，height]并返回此包布局。

所以，例如，在你分享的bl.ocks中，我们可以做到......

.size([width/2, height/2])

......减少包装面积。

看看这个更新的bl.ocks，我在SVG中放置一个矩形来显示缩小的区域和淡紫色背景：https://bl.ocks.org/GerardoFurtado/de5ad7b9028289d290a62bc41f97f08b/880ec47cbfa236bb05e96b8e22dbe05e9bdf140d

修改

这是一个针对您的编辑的编辑，这在S.O.中通常不是一个好习惯。回答，但我相信这一点值得澄清：改变数据并不重要！

在你的编辑中你说过......

  

如果数据从[{"a",40}, {"b",50},{"c",60}]切换到[{"a",4}, {"b",8},{"c",10}]，理想情况下圆圈的比例会相应变小。

不，他们不会！布局获取数据并占用可用空间的最大量。例如，即使您有这样的对象：

[{name:"foo", size:1}]

这就是您所拥有的：https://bl.ocks.org/GerardoFurtado/0872af463ee0d786dc90f2d1361f241f/bd5357164708f09e2f130f510aea424809d9d1f1