如何制作图标大小取决于大小的图标气泡图？

Question

寻找类似于URL中给出的气泡图的已知库，插件或Icon-Bubble Chart的实现，但是将包含圆形图标而不是纯气泡。有点像下图。

源数据将类似于以下内容：

[{
  Twitter: 9212,
  Facebook: 3503,
  Blog: 2483,
  YouTube: 3000,
  Instagram: 2100
}]

气泡的大小应与重量成比例。希望为此编写一个jQuery插件，但是可以节省一些时间的参考或研究可能很棒。预先感谢。

Answer 1

为了不使用size作为其屏幕视觉尺寸和初始value的术语，我们将其称为size（视觉上）和{{1 }}（它们各自的编号）。

根据当前的重量确定半径非常容易（实际上，半径可以为重量，只要您在缩放后按比例缩小/放大整个结果以匹配可用空间即可）完成绘制）。

一旦确定了它们的半径（大小），就可以继续绘制第一个。绘制它的位置并不重要，因为稍后将根据结果视口重新定位整个合成。

您还需要绘制第二个角度的首选角度（大约-60度）。另一个要设置的参数是圆之间的距离，您可能希望该距离恒定。最大尺寸的weight看起来不错，但是您随时可以根据需要进行调整。使用以上所有内容和第一个中心的坐标，您可以确定第二个中心的坐标。

可能最具挑战性的部分是，当您拥有前两个三角形以及所得三角形各边的长度时，确定第三个中心的坐标。但这是only trigonometry。

使用相同的技术，可以确定随后的每个中心。您可以从中心1和3确定中心4，从1和4确定中心5，依此类推。为了使算法更完美，您需要一种方法来确定何时不再需要使用中心1 +最后添加的中心，而不必使用其他中心（当圆环蜗牛绕成一个完整的圆并使用C1时，会导致与圆2-会比较棘手，并且需要跟踪角度-但是，对于您的情况，此计算是不必要的。
但是，如果确实需要这样做（用于创建蜗牛），则需要一种检查重叠的方法，例如：

• 尝试使用第一个和最后一个中心确定下一个圆
• 如果所得圆的中心比其半径加间隙的总和更接近其他任何中心，则表示您重叠，请尝试使用第二个和最后一个...
• 继续前进，直到没有重叠为止

完成后，您要做的就是确定整个结果图形的大小，以便可以在可用空间中正确定位和调整大小。
这相当简单（您可以根据圆的中心位置和半径计算每个圆的顶部，左侧，底部和右侧），并将它们喂入一些批次（数组-左侧点值，右侧点值，顶部和底部）。最低的左边，最低的底部，最高的权限和最高的顶部确定您的视图框，在这一点上您具有宽度和高度，因此可以调整整个合成的大小并将其放置在父级中。

要编写所有上述内容，需要有经验的软件开发人员大约1个小时。当前，最大的问题是您没有写下例程的逻辑步骤，也没有为任何一个步骤编写代码。

我相信我的回答会帮助您解决逻辑上的步骤，我建议您写出您真正知道如何解决的部分，并忽略您不了解的部分（如果有的话）。在这一点上，您将能够提出有关SO的更相关且广为接受的问题，很多人可能会回答或帮助它。

---

编辑，您的问题又让我烦了（这是我喜欢解决的问题类型）。因此，我以此为借口将Vue.js进行了试用，这是我现在想要做的事情了。这是the result。
注意：它没有我上面提到的检查重叠的方法（它只是绕着第一个圆旋转），可能我不会编写代码。我承认我从不喜欢三角学。 ：）