3

这是jsfiddle：

在此处输入图像描述

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

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

在此处输入图像描述

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

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

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

4

1 回答 1

4

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

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

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

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

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

也就是说，我宁愿只使用气泡布局，或者在党圈中使用具有多焦点力量布局的区域进行包布局。

于 2014-01-20T14:29:05.350 回答