Circle包作为D3力布局的节点

Question

这是jsfiddle ：

如果你有两个政党，你想要在多个投票单位或类似的结构化数据中提出选举结果，这真的很好。

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

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

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

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

Answer 1

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

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

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

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

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

也就是说，我宁愿只使用气泡布局，或者为聚会圆圈的多焦点布局区域设置包装布局。