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