避免d3.js圈重叠 [英] avoid d3.js circles overlapping

查看:1087
本文介绍了避免d3.js圈重叠的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您可以在此bl.ock ,以便圆圈紧贴其边框。





我在这段代码中找不到答案,我错过了一些我认为的东西。



有没有简单的解决办法?尝试不同的负电荷力量,如果圆圈大小改变(如果巴黎的所有圆圈变得很小,那么它们变得彼此太远)会导致问题。

解决方案

如果您的目标是防止重叠,请检测碰撞 a>是满足该约束的更直接的方式。这将产生比排斥充电力更精确的结果。这是另一个例子:





您不需要强制布局即可完成此操作,两者经常一起使用。您可以对节点进行固定次数的迭代,以解决初始化时的任何冲突。以下是我的一次演讲的实施:




You can see in this bl.ock http://bl.ocks.org/3012590 that there are many points geo-referenced in Paris, with the big circle over the little ones:

I would like to get something similar to http://vallandingham.me/vis/gates/ , so that circles get closely appended by its border.

Sorry, I could not find the answer in this code, i am missing something I think.

Is there an easy fix to get that? tried different negative charge forces, causing problems if circle size changes (if all circles in Paris become little, then they become too far away each other)?

解决方案

If your goal is to prevent overlap, then detecting collisions is a more direct way of satisfying that constraint. This will produce a more precise result than repulsive charge forces. Here’s another example:

You don't need a force layout to accomplish this, though the two are often used together. You can iterate over the nodes a fixed number of times to resolve any collisions on initialization. Here's the implementation from one of my talks:

这篇关于避免d3.js圈重叠的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆