使用 typeScript 在 Angular 中填充水平堆叠条形图的 D3：.attr("fill", ..) 在 VSC 中出现错误 "No overload matches this call"

Question

我正在尝试按照代码 here.

在 d3 中创建堆叠水平条形图

我已经在 stackBlitz here.

上创建了一个最小的复制品

虽然我在 stackBlitz 的 linter 中没有收到错误，但它出现在 Visual Studio 代码：

的这一行中

.attr("fill", (d) => {
            const colorKey = get(d, "key");
            console.log("deleteMe colorKey is: ");
            console.log(colorKey);
            const targetColor = color(colorKey) ? color(colorKey) : "#e41a1c";
            console.log("deleteMe targetColor is: ");
            console.log(targetColor);
            return targetColor;
          })

我收到的完整错误如下：

No overload matches this call. Overload 1 of 4, '(name: string, value: null): Selection<SVGGElement, Series<{ [key: string]: number; }, string>, SVGGElement, unknown>', gave the following error. Argument of type '(this: SVGGElement, d: Series<{ [key: string]: number; }, string>) => unknown' is not assignable to parameter of type 'null'. Overload 2 of 4, '(name: string, value: string | number | boolean): Selection<SVGGElement, Series<{ [key: string]: number; }, string>, SVGGElement, unknown>', gave the following error. Argument of type '(this: SVGGElement, d: Series<{ [key: string]: number; }, string>) => unknown' is not assignable to parameter of type 'string | number | boolean'. Type '(this: SVGGElement, d: Series<{ [key: string]: number; }, string>) => unknown' is not assignable to type 'true'. Overload 3 of 4, '(name: string, value: ValueFn<SVGGElement, Series<{ [key: string]: number; }, string>, string | number | boolean>): Selection<SVGGElement, Series<...>, SVGGElement, unknown>', gave the following error. Argument of type '(this: SVGGElement, d: Series<{ [key: string]: number; }, string>) => unknown' is not assignable to parameter of type 'ValueFn<SVGGElement, Series<{ [key: string]: number; }, string>, string | number | boolean>'. Type 'unknown' is not assignable to type 'string | number | boolean'. Type 'unknown' is not assignable to type 'true'.ts(2769)

我发现了（许多其他相关的帖子都在 React 中，它们主要与提供给组件的无关属性有关），所以我确保我的匿名函数返回十六进制颜色，无论什么，但这并没有解决问题。不幸的是，我不太理解上面 d3.attr("fill",...) 错误的各种覆盖签名，所以我喜欢

覆盖问题的解决方案，如果可能，
关于这些签名对 .attr("fill",...) 的具体含义的解释（或 link）。
非常欢迎任何额外的帮助让水平堆叠条形图显示水平堆叠条形图。

关于后者（上面的#2），我查看了一些文档 here 并且在那里几乎看到了相同的语法：

svg.selectAll(".firstrow").data(data).enter().append("circle").attr("cx", function(d,i){return 30 + i*60}).attr("cy", 50).attr("r", 19).attr("fill", function(d){return myColor(d) })

这不是 typeScript，我不确定如何让它对 typeScript 友好...

非常感谢您的帮助。

Answer 1

由于 get 可能 return any 值，其结果应该是强类型的：

.attr("fill", (d) => {
  const colorKey = String(get(d, "key"));
  return color(colorKey) ?? "#e41a1c";
})

使用 typeScript 在 Angular 中填充水平堆叠条形图的 D3：.attr("fill", ..) 在 VSC 中出现错误 "No overload matches this call"

D3 fill for a horizontal stacked bar chart in Angular with typeScript: .attr("fill", ..) gets error "No overload matches this call" in VSC

d3.js

typescript

angular