寻找一个已知的库、插件或图标气泡图的实现，类似于此URL 中给出的气泡图，但将包含圆形图标而不是普通气泡。有点像下图。
源数据如下所示：
[{
Twitter: 9212,
Facebook: 3503,
Blog: 2483,
YouTube: 3000,
Instagram: 2100
}]
气泡的大小应与重量成正比。希望为此编写一个 jQuery 插件，但是一些可以节省一些时间的参考或研究可能会很棒。提前致谢。
【问题讨论】：
标签： jquery css charts jquery-plugins
为了不将size 用作其屏幕视觉尺寸和初始value 的术语，我们称它们为size（视觉尺寸）和weight（它们各自的编号）。
根据当前权重确定半径相当容易（实际上，半径可以是权重，只要您缩小/放大整个结果以匹配可用空间，之后您'画完了）。
一旦确定了它们的半径（大小），就可以继续绘制第一个。在哪里绘制它并不重要，因为稍后您将根据生成的视口重新定位整个构图。
您还需要一个首选角度来绘制第二个角度（可能是 -60 度）。另一个要设置的参数是圆之间的距离，您可能希望它保持不变。 10% 最大的尺寸看起来不错，但如果需要，您可以随时回来调整它。有了以上所有和第一个中心的坐标，您就可以确定第二个中心的坐标。
可能最具挑战性的部分是当你有前两个中心时确定第三个中心的坐标以及得到的三角形每边的长度。但它是only trigonometry。
使用相同的技术，您可以确定每个后续中心。您可以从中心 1 和 3 确定中心 4，从 1 和 4 确定中心 5，依此类推。为了使您的算法完美，您需要一种方法来确定何时不再需要使用中心 1 + 添加的最后一个，而是使用不同的中心（当圆圈的蜗牛形成一个完整的圆圈并使用 C1 会导致与圈 2 - 这会更棘手，它会涉及跟踪角度 - 但是，对于您的情况，这种计算不是必需的）。
但是，如果您确实需要这个（用于创建蜗牛），您将需要一个检查重叠的方法，如下所示：
完成后，您需要做的就是确定整个生成的绘图的大小，这样您就可以在可用空间中正确定位和调整它的大小。
这相当容易（您从每个圆的中心位置和半径计算顶部、左侧、底部和右侧）并将它们提供给一些批次（数组 - 左点值、右点值、顶部和底部）。左边的最低点、底部的最低点、右边的最高点和顶部的最高点决定了您的视图框，此时您具有宽度和高度，因此您可以在父级中调整整个构图的大小和位置。
经验丰富的软件开发人员大约需要 1 小时来编写以上所有内容。目前，您最大的问题是您没有写下例程的逻辑步骤，也没有为这些步骤中的任何一个编写代码。
我相信我的回答将有助于执行合乎逻辑的步骤，我建议您编写您真正知道如何解决的部分，并省略您不知道的部分（如果有的话）。到那时，您就可以就 SO 提出一个更中肯且广受好评的问题，很多人可能会回答或提供帮助。
编辑你的问题又让我烦恼（这是我喜欢解决的问题类型）。因此，我以此为借口试用了 Vue.js，这是我一段时间以来想做的事情。这里是the result。
注意：它没有我上面提到的检查重叠方法（它只是围绕第一个圆圈旋转），我很可能不会编写它。我承认我从来不喜欢三角学。 :)
【讨论】：
vue.js）。