javascript - 如何使用 d3 根据颜色范围中的值为 SVG 图像着色？

Question

我正在尝试创建一系列代表团队成员的 SVG 图像。数量person svg 图像根据团队成员总数显示。以下是一些重要的观点:

有的成员(member)有分数有的没有

每个人的SVG图像代表团队中的一个成员

SVG 团队的颜色应该映射到分值

分值范围为 1 - 5

我创建了 stackblitz展示我在 Angular 和 d3 v5 中所做的事情。出于某种原因，图像没有显示在 StackBlitz 中，但它可以在我的本地机器上运行。
询问
我面临的问题是人物图像上的颜色与颜色图例和值不匹配。我不知道为什么也不知道如何修复它。
该图像目前看起来像这样:

资料

this.teamScores = [
                          {
                              "memberPersonID": "2892082",
                              "score": 3.8571
                          },
                          {
                              "memberPersonID": "2917522",
                              "score": 3
                          },
                          {
                              "memberPersonID": "2917524",
                              "score": 3.2857
                          },
                          {
                              "memberPersonID": "2917517",
                              "score": 3.2857
                          },
                          {
                              "memberPersonID": "2917520",
                              "score": 3.4286
                          },
                          {
                              "memberPersonID": "2917519",
                              "score": 3
                          },
                          {
                              "memberPersonID": "2917523",
                              "score": 3.1429
                          }
                      ]

请注意得分值和图例。目前的颜色似乎没有映射到实际分数。

Answer 1

您的图像没有着色的原因是您的 colorRange 为空。原因如下:

var colorRange = d3.range(0, 1, 1.0 / grads.length - 1);

这里，最后一个参数计算为 (1.0 / grads.length) - 1 = 0.11111 - 1 = -0.8888 ，这是一个负数。所以这个范围是空的，这让所有人都黑了。
将此更改为 var colorRange = d3.range(0, 1, 1.0 / (grads.length - 1));修复。