Circle包作为D3力布局的节点

Question

以下是jsfiddle：

如果您拥有2个政党，并且想要在多个投票单位或类似结构化数据中提交选举结果，那么这非常好。

但是，我需要在视觉上代表：（5个政党而不是2个）（请忽略除“座位”之外的所有原始内容;只有“座位”应该可视化）

我希望每个circle pack内都有一个force layout node。

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

你能告诉我这是否可行和/或大纲代码组织？

Answer 1

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

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

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

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

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

那就是说，我宁愿只使用气泡布局，或者为派对圈子采用多焦点布局的区域进行包装布局。