气泡图标签放置算法？(最好是用JavaScript)

Question

我想自动放置100-200个泡泡标签,以满足以下要求:

• 标签不应重叠
• 标签最好不要与气泡重叠
• 标签应该接近泡沫
• 首选标签位置(左上,上,下,右等)应在一定程度上得到尊重
• 字体大小可能有所不同

这有什么有用的库/算法吗？(最好是JavaScript或PHP)

(图像中的标签位置不符合这些要求)

Answer 1

这个怎么样？

一种有效的散点图标注算法

Answer 2

我想你正在使用javascript,html和css？无论如何,我想到了两种方法.

首先是将其表述为优化问题.您需要为每个标签计算理想位置.这将基于气泡的大小,所需的位置(即顶部,底部,左侧,右侧)和标签的大小(字体和长度).然后,您需要参数化您的坐标,例如2N元素的列表,其中N是标签的数量.然后,您需要在某个位置(或使用遗传算法的群体)初始化标签,并应用需要成本函数的优化算法.这将基于一组标签位置与理想位置的距离,以及违反规则的任何内容,例如重叠.

或者,使它成为一个物理问题.使用一些刚性链接将每个标签"附加"到其气泡上.为每个标签和每个气泡赋予一个排斥力,并增加一个全局和更强的重力(在首选的上/左/右/下方向).进行短暂的物理模拟直到达到平衡.数学不应该太难.

Answer 3

我想如果你在工具中使用D3,你可以使用"基于力的"标签放置算法.该解决方案最初属于Max Planck Research Networks,但已有一个现成的Javascript示例,此处:D3中基于强制的标签放置