圆形包作为 D3 力布局的节点

Question

这里是jsfiddle：

如果您有 2 个政党，并且您想展示多个投票单位的选举结果或类似结构的数据，这真的很好。

但是，我需要直观地表示这一点：（5 个政党而不是 2 个）（请忽略除“席位”之外的所有原始数据；应该只显示“席位”）

我想在每个force layout node 中添加一个circle pack。

例如，应该有一个名为 BC 的气球，其中包含四个较小的圆圈，其面积分别与 21、12、2、1 成比例（一个政党在 BC - 不列颠哥伦比亚省没有赢得任何席位），以此类推加拿大各省。

你能告诉我这是否可能和/或概述代码组织吗？

Answer 1

策略应该或多或少：格式化数据结构以反映该层次结构：

{
    name: 'Election Results',
    children: [
        {
            region: 'BC',
            children: [
                {party: 'Conservative', seats: 12},
                ...
            ]
        }
    ]
}

并计算此数据的包布局，但不要绘制任何圆圈。这将为您提供每个区域的大小，在 depth === 1 所在的节点中。现在您可以计算力布局。为了避免一个区域与另一个区域重叠，您应该将费用设置为与每个区域的面积成正比（与Math.pow(d.r, 2)成正比。

现在，您可以为depth === 1（区域）所在的每个节点创建一个组，设置由力布局给出的位置。

对于每个组，计算一个新的包布局，将每个组的大小设置为区域半径的两倍。您现在可以在组选择的子选择中创建圆，为每个圆提供第二个包布局设置的半径。最后，我会为每个派对创建一个类，这样你就可以为每个气泡设置不同的样式。也许应该对小组圈子做同样的事情。

也就是说，我宁愿只使用气泡布局，或者在派对圈使用多焦点力量布局的区域使用包布局。