javascript - 圆包作为 D3 力布局的节点

Question

这里是 jsfiddle :

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

但是，我需要直观地表示这一点:(5 个政党而不是 2 个)(请忽略除“席位”之外的所有原始数据；只有“席位”应该被可视化)

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

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

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

Answer 1

策略应该或多或少:格式化数据结构以反射(reflect)该层次结构:

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

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

现在，您可以为每个 depth === 1 的节点(区域)创建一组，设置力布局给定的位置。

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

也就是说，我宁愿只使用泡泡布局，或者为聚会圈使用多焦点力量布局的区域进行打包布局。