标签：svg d3-js force-layout circle-pack javascript

这是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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。