D3圆填料直径计算答案

【问题标题】：D3 circle packing diameter calculationD3圆填料直径计算
【发布时间】：2014-08-04 14:40:47
【问题描述】：

我正在使用包装布局来包装不同大小的圆圈。我有一组要可视化的集群。所以我为每个圆簇调用 pack 函数。在所有 d3 示例中，直径是使用给定尺寸或固定直径计算的。我想根据要打包的圈数来计算。那么如何计算包装圆直径呢？有什么公式可以让我在不浪费空间的情况下打包圆圈。

【问题讨论】：

【解决方案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）：

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

这里有几种选择：

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

我知道这不是完整的解决方案，但希望这可以为您的尝试指明正确的方向。

进一步编辑：

突然间，另一个想法浮现在脑海中。是我之前建议的一种实现，但这将确保您使用当时可用的最大空间来绘制圆圈：

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

【讨论】：