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

Posted 2023-05-09

【中文标题】如何制作图标大小取决于大小的图标气泡图？

【英文标题】：How to make an Icon-Bubble Chart where size of icons depends upon size?

【发布时间】：2019-03-31 05:52:12

【问题描述】：

寻找一个已知的库、插件或图标气泡图的实现，类似于此URL 中给出的气泡图，但将包含圆形图标而不是普通气泡。有点像下图。

源数据如下所示：

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

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

【参考方案1】：

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

根据当前权重确定半径相当容易（实际上，半径可以是权重，只要您缩小/放大整个结果以匹配可用空间，之后您'画完了）。

一旦确定了它们的半径（大小），就可以继续绘制第一个。在哪里绘制它并不重要，因为稍后您将根据生成的视口重新定位整个构图。

您还需要一个首选角度来绘制第二个角度（可能是 -60 度）。另一个要设置的参数是圆之间的距离，您可能希望它保持不变。 10% 最大的尺寸看起来不错，但如果需要，您可以随时回来调整它。有了以上所有和第一个中心的坐标，您就可以确定第二个中心的坐标。

可能最具挑战性的部分是当你有前两个中心时确定第三个中心的坐标以及得到的三角形每边的长度。但它是only trigonometry。

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

尝试使用第一个和最后一个中心来确定下一个圆 如果生成的圆的中心比它们的半径之和加上间隙更接近任何其他中心，则您重叠，请尝试使用第二个和最后一个... 继续前进，直到没有重叠

完成后，您需要做的就是确定整个生成的绘图的大小，这样您就可以在可用空间中正确定位和调整它的大小。 这相当容易（您从每个圆的中心位置和半径计算顶部、左侧、底部和右侧）并将它们提供给一些批次（数组 - 左点值、右点值、顶部和底部）。左边的最低点、底部的最低点、右边的最高点和顶部的最高点决定了您的视图框，此时您具有宽度和高度，因此您可以在父级中调整整个构图的大小和位置。

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

我相信我的回答将有助于执行合乎逻辑的步骤，我建议您编写您真正知道如何解决的部分，并省略您不知道的部分（如果有的话）。到那时，您就可以就 SO 提出一个更中肯且广受好评的问题，很多人可能会回答或提供帮助。

---

编辑你的问题又让我烦恼（这是我喜欢解决的问题类型）。因此，我以此为借口试用了 Vue.js，这是我一段时间以来想做的事情。这里是the result。注意：它没有我上面提到的检查重叠方法（它只是围绕第一个圆圈旋转），我很可能不会编写它。我承认我从来不喜欢三角学。 :)

【讨论】：

@ChaosLegion 每当您提出问题时，您都会收到来自Stack Overflow 的回复，而没有列出您投入的研究工作。甚至列出没有帮助的类似问题的链接，并说明原因没有，对任何考虑答案的人都有用。理想情况下，您还应该发布一些代码来尝试解决您当前的问题。最后，您可以说 SO 需要证明是程序员提出问题，而不是客户需要程序员。如果我们在这里回答客户的问题，我们会对自己造成很大的伤害。

@Chaos，请参阅我添加到问题中的 lil' 编辑。用它作为灵感（也许画一些绝对定位的 div 来保存你的图标？）但是，请不要让我为你的目的修改它。编码它服务于我自己的个人目的，这是我唯一的动力。我希望你不要介意我对此的立场。

哦，我的估计完全错误。我没花 1 小时，我花了大约 2 天（三角函数部分大约是 4 小时 - 其余的在搞清楚vue.js）。

谢谢。在没有 vue.js 的情况下，我花了 5 个小时，只需定位所有圆形 div 标签而不是渲染 svg。但我喜欢你的方法。 :)