计算三角形内的一个位置

Question

我正在尝试按照这张图片的设计来可视化一些数据：

每个学科都有一个分数（1-100）。我希望中间的圆点表示学生（中间的圆点）擅长的学科。

例如： 如果学生在学科1和学科2中都得了50％，而在学科3中得了100％，我希望圆点稍微靠近学科3并完美居中于学科1和2之间，如下图所示：

您有关如何实现此操作的任何建议甚至是正确方向上的指引，将不胜感激！

- Koos

---

重心坐标可能在这里有用？这个链接可能会有帮助 https://www.npmjs.com/package/barycentric - Dacre Denny

Answer 1

将所有学科的分数相加，然后将每个学科的分数除以总分数，得到每个学科的系数。然后将每个学科的分数乘以它们各自的系数并相加，得到您的中心点。

例如（非代码）：

subject1: 50%
subject2: 50%
subject3: 100%

total: 200

subject1 co-eff: 50 / 200 = 0.25
subject2 co-eff: 50 / 200 = 0.25
subject3 co-eff: 100 / 200 = 0.5

centralpoint.x = (point1.x * 0.25) + (point2.x * 0.25) + (point3.x * 0.5)
centralpoint.y = (point1.y * 0.25) + (point2.y * 0.25) + (point3.y * 0.5)

你正在计算每个主题的权重，使得权重总和为1，然后找到三个点的加权平均值。这种构造称为凸组合（感谢@MattTimmermans在评论中提供链接）。

一个特殊情况是分数总和为零，在这种情况下没有有效的点（因为计算将涉及除以零）。在这种情况下，你可以将点放在正中间，或者只显示没有点，由你决定。

- samgak

---

一个小缺点是，例如，一个技能为（0％，0％，100％）的学生将被放置在与一个技能为（0％，0％，10％）的学生相同的位置。但是如果没有更多关于OP愿望的细节，很难做得更好（+1）。 - Damien

这正是我一直在寻找的！非常感谢你！ - Koos

@Damien 是的，没错。但是我认为不可避免地会出现一个情况，即多个分数集将映射到一个点上，因为我们正在将一个三维空间映射到二维空间中。三角形上的每个点都对应着主题-分数空间中的一条线，沿着该线有许多分数集。 - samgak

我认为在上面的例子中，所有角度都是相等的。这个公式也适用于不等角吗？ - flori

@flori，是的，它会。请参考凸组合的链接以获取示例。 - samgak