avoid d3.js circles overlapping

a 夏天 提交于 2019-12-03 03:14:00

问题


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)?


回答1:


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:

  • http://bl.ocks.org/1748247

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:

  • https://github.com/mbostock/d3/blob/gh-pages/talk/20111018/collision.html#L76-101


来源:https://stackoverflow.com/questions/11339348/avoid-d3-js-circles-overlapping

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!