Question

我正在使用包布局来包装不同大小的圆圈。我有一组可视化的集群。所以我为每个圆群调用包函数。在所有d3实例中，直径可以用给定尺寸或固定直径计算。我想根据要包装的圈数来计算它。那么如何计算填料圆直径？是否有任何公式，以便我可以打包圈而不浪费空间。

Answer 1

如果您真的不关心圈子的相对大小，那么您可以使您的JSON文件仅代表您关心的数据（例如，名称），并为您的包装功能提供一个虚拟值，即“值”访问者功能是期待的。

例如：

var circleChildren = [{
    "value": 1
}, {
    "value": 1
}, {
    "value": 1
}, {
    "value": 1
}];

会为您提供一个JSON对象，您可以将其用作包装功能的子对象：

var circleInput = Object();
circleInput.children = circleChildren;

您可以通过运行以下命令在控制台中验证：

bubble.nodes(circleInput)
    .filter(function (d) {
    return !d.children; //we're flattening the 'parent-child' node structure
})

其中bubble是您的D3包装泡泡变量。 Here's a fiddle证明了这一点。它可能有一些额外的东西，但它实现了你正在寻找的东西。此外，您可以通过在JSON文件中添加更多虚拟对象来玩弄圈数，以及更改diameter变量中的SVG容器大小。希望有所帮助！

编辑：布局的大小（在这种情况下，'直径'变量的误称）直接决定了你圈子的大小和直径。在某些时候，您必须分配pack.size（）或pack.radius（）值，以便您的圆圈在布局中显示（documentation）：

如果指定了size，则将可用的布局大小设置为指定x和y的指定的两元素数组。如果未指定大小，则返回当前大小，默认为1×1。

这里有几个选项：

如果您希望您的圆圈“动态”调整到可用元素的宽度（也就是说，如果您希望它们覆盖所有可用的元素宽度），那么我建议您事先获取元素的宽度，然后适用于你的pack（）函数。问题是你必须考虑调整大小等。
如果您想保持最大尺寸，那么您必须让您的响应更快。在SO中有一个非常好的question来处理它。

我知道这不是完整的解决方案，但希望能指出你正在做的事情的正确方向。

进一步编辑：

突然间，我想起了另一个想法。这是我之前建议的一种实现方式，但这可以确保您使用当时可用的最大空间来绘制圆圈：

zone = d3.select("#myDiv");
myWidth = zone.style("width").substring(0, zone.style("width").length - 2);