如何在d3中控制圆形包装布局中气泡的大小答案

【问题标题】：how to control size of bubble in circle packing layout in d3如何在d3中控制圆形包装布局中气泡的大小
【发布时间】：2018-04-01 10:46:16
【问题描述】：

气泡的大小将始终填满矩形绘图画布。有没有办法将大小固定为一致，以便我可以使气泡变小？

同时因为它会放大，即使传入较小的值，半径也不会真正变小。

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

如何控制规模？谢谢。

【问题讨论】：

【解决方案1】：

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

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

因此，例如，在您共享的块中，我们可以做...

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

... 减少包装面积。

编辑

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

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

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

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

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

【讨论】：

谢谢..我已编辑问题以进行澄清。我认为调整宽度和高度会使整个 blob 变小，但很难计算出每个圆的比例大小。
答案还是我这里解释的那个。布局将采用任何数据并填充size中指定的空间。
如果'a'元素减少了一半，'b'增加了10倍，我怎么知道宽度和高度的整体尺寸。 “布局获取数据并占用最大的可用空间”是这里的问题。所以我想你的回答是说按比例缩放是不可能的
@santoku 是的，没有 hack 是不可能的，这不是圆形包装的工作原理。