气泡图标签放置算法？ （最好在JavaScript中）

Question

我想自动放置100-200个气泡标签，以便满足以下要求：

• 标签不应重叠
• 标签最好不应与气泡重叠
• 标签应接近气泡
• 应该在一定程度上尊重标签的首选位置（左上，上，下，右等）
• 字体大小可以变化

是否有任何有用的库/算法？ （最好是JavaScript或PHP）

（图像中的标签放置不满足这些要求）]] >>

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9jcnRqTy5wbmcifQ==” alt =“在此处输入图像描述”>

我想自动放置100-200个气泡标签，以便满足以下要求：标签不应该重叠标签应该最好不与气泡重叠标签应该靠近...

Answer 1

这可以表述为线性规划问题。您希望根据某些约束（您的要求）最大化或最小化功能（表示解决方案的“权重”或“优势”）。您需要将需求正式化为价值。像这样的东西：

Variables:
x1 = 1 if Labels overlap, 0 otherwise
x2 = some measure of "how much" a label overlaps a bubble
x3 = distance from label to bubble //Label should be close to bubble
x4 = distance between ideal and actual label position
x5 = difference between actual and ideal font size


minimize x1 + 10*x2 + x3 + 20*x4 + 5*x5

subject to constraints:
    x1   = 0  // labels can never overlap
    x2   < /* maximum amount a label is allowed to overlap a bubble */
    ...
    x5   < 6 // font size does not vary by more than +/- 6 pts.

Answer 2

怎么样？

Answer 3

我想您正在使用javascript，html和CSS？无论如何，我想到了两种方法。

Answer 4

我认为，如果您在工具内部使用D3，则可以使用“基于力”的标签放置算法。该解决方案最初属于Max Planck Research Networks，但已经有一个现成的Javascript示例，在这里：Force-based label placement in D3

Answer 5

也许可以使用一些如下的帮助工具：

Answer 6

不幸的是，我认为很难在Javascript或PHP中找到此解决方案。但是，我确实认为您的问题可以分解为一些小问题（基于规则），以帮助您设计解决方案。

Answer 7

[我在Java中发现了一个实际上可以解决该问题的方法，该方法实际上有效，并且被称为强制导向地图标注，并且是开放源代码的学术经验。

Answer 8

怎么样

Answer 9

This thread在涵盖某些方法方面非常好。我正在使用具有多个焦点的力布局，因为这似乎是最好的整体方法。