这里是 jsfiddle :
如果您有 2 个政党,并且您想要显示多个投票单位的选举结果或类似结构的数据,这真的很好。
但是,我需要直观地表示这一点:(5 个政党而不是 2 个)(请忽略除“席位”之外的所有原始数据;只有“席位”应该被可视化)
我想在每个 force layout node
中有一个 circle pack
。
例如,应该有一个名为 BC 的气球,其中包含四个较小的圆圈,其面积与 21、12、2、1 成正比(一个政党在 BC - 不列颠哥伦比亚省没有赢得任何席位),依此类推加拿大各省。
你能告诉我这是否可行和/或概述代码组织吗?
最佳答案
策略应该或多或少:格式化数据结构以反射(reflect)该层次结构:
{
name: 'Election Results',
children: [
{
region: 'BC',
children: [
{party: 'Conservative', seats: 12},
...
]
}
]
}
并计算此数据的包装布局,但不要绘制任何圆圈。这将为您提供每个区域的大小,在 depth === 1
的节点中。现在您可以计算力布局。为避免一个区域与另一个区域重叠,您应该将电荷设置为与每个区域的面积成正比(与 Math.pow(d.r, 2)
成正比)。
现在,您可以为每个 depth === 1
的节点(区域)创建一组,设置力布局给定的位置。
对于每个组,计算一个新的包布局,将每个包的大小设置为该区域半径的两倍。您现在可以在组选择的子选择中创建圆圈,为每个圆圈提供由第二个包布局设置的半径。最后,我会为每个派对创建一个类,这样您就可以为每个泡泡设置不同的样式。也许对小组圈子也应该这样做。
也就是说,我宁愿只使用泡泡布局,或者为聚会圈使用多焦点力量布局的区域进行打包布局。
关于javascript - 圆包作为 D3 力布局的节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21231919/