Circle打包为D3力布局的节点 [英] Circle packs as nodes of a D3 force layout

问题描述

以下是 jsfiddle ：

这真的很好如果你有2个政党，你想在几个表决单位或类似的结构化数据上显示选举结果。

但是，我需要直观地表示这个:( 5个政党而不是2个）（请忽略除座位以外的所有原始图片;只有座位可视化）

我想在每个强制布局节点内有圈子。

例如，应该有一个称为BC的气球，其中包含四个较小的圆形，面积与21,12,2,1（比例为一个政党在卑诗省 - 不列颠哥伦比亚省没有赢得任何席位）成正比，等等所有省

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

解决方案

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

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

计算此数据的Pack布局，但不要绘制任何圆形。这将给你每个区域的大小，在深度=== 1 的节点。现在你可以计算力布局。要避免一个区域与另一个区域重叠，您应该将电荷设置为与每个区域的面积成正比（与 Math.pow（dr，2）成比例。 >

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

对于每个组，计算新的包布局，将每个组的大小设置为区域半径的两倍。现在可以创建圆在组选择的子选择中，给每一个由第二包布局设置的半径。最后，我将为每个方创建一个类，以便可以对每个气泡进行不同的样式。

也就是说，我宁愿只使用气泡布局，或者为派对圈子的多焦点力量布局区域设置一个布局。

Here is jsfiddle:

This is really good if you have, let's say, 2 political parties, and you want to present election results across several voting units, or similarly structured data.

However, I need to visually represents this: (5 political parties instead of 2) (please ignore all raws except "seats"; only "seats" are supposed to be visualized)

I would like to have a circle pack inside each force layout node.

For example, there should be a balloon called BC containing four smaller circles with areas proportional to 21, 12, 2, 1 (one political party didn't win any seat in BC - British Columbia), and so forth for all provinces in Canada.

Could you tell me if this is possible and/or outline code organization?

解决方案

The strategy should be more or less: Format the data structure to reflect that hierarchy:

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

And compute the Pack Layout for this data, but don't draw any circles yet. This will give you the size for each region, in the nodes where depth === 1. Now you can compute the force layout. To avoid one region overlapping another one, you should set the charge to be proportional to the area of each region (proportional to Math.pow(d.r, 2).

Now, you can create one group for each node where depth === 1 (the regions), setting the position given by the force layout.

For each group, compute a new pack layout, setting the size of each one to twice the radius of the region. You can now create the circles in a subselection of the groups selection, giving each one the radius set by the second pack layouts. Finally, I would create a class for each party, so you can style each bubble differently. Perhaps the same should be done for the group circles.

That said, I would rather use just the bubble layout, or having a pack layout for the regions with multi-foci force layout for the party circles.

这篇关于Circle打包为D3力布局的节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！