JavaScript-Circle packs作为D3强制布局的节点

这是jsfiddle：

假设您有两个政党,并且要在多个投票单位或类似结构的数据中展示选举结果,这确实非常好.

但是,我需要直观地表示：(5个政党,而不是2个政党)(请忽略除“座位”之外的所有原始内容；应该仅将“座位”可视化)

我想在每个力布局节点内都有一个圆包.

例如,应该有一个名为BC的气球,其中包含四个与21、12、2、1成正比的较小圆圈(一个政党在BC不赢得任何席位-不列颠哥伦比亚省),依此类推.

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

解决方法:

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

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

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

现在,您可以为深度=== 1(区域)的每个节点创建一个组,并设置力布局指定的位置.

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

就是说,我宁愿只使用气泡布局,也可以对区域使用包布局,对聚会圈子使用多焦点力布局.

标签：svg,d3-js,force-layout,circle-pack,javascript
来源： https://codeday.me/bug/20191030/1964190.html