D3.js v5 Domain() 不为数组获取变量

Question

在我使用 D3 v5 的 Angular 5 项目中，如果我给出以下内容，代码将编译：

let y0 = d3.scaleLinear().domain([0, 100000]).range([this.height, 0]);

但是，如果我为域的上限和下限提供以下变量名，则会收到错误：

let y0 = d3.scaleLinear().domain([d3.min(data.totalCount), d3.max(data.totalCount)]).range([this.height, 0]);

错误：TS2345：“string[]”类型的参数不可分配给“number |”类型的参数或 ({valueOf(): number;})[]'。类型 'string' 不可分配给类型 'number |或 {valueOf(): number;}。

我知道 d3.min 和 d3.max 的参数是数字，如果我提供一个数字测试数组 test = [1, 2, 3, 4]，我会得到同样的错误。

为什么它试图将这些变量读取为字符串？我做错了什么？

Answer 1

d3.min()实际上有四个type definitions：

export function min(array: ArrayLike<string>): string | undefined;

export function min<T extends Numeric>(array: ArrayLike<T>): T | undefined;

export function min<T>(array: ArrayLike<T>, accessor: (datum: T, index: number, array: ArrayLike<T>) => string | undefined | null): string | undefined;

export function min<T, U extends Numeric>(array: ArrayLike<T>, accessor: (datum: T, index: number, array: ArrayLike<T>) => U | undefined | null): U | undefined;

编译器将选择最适合您的代码，鉴于您没有提供任何类型参数，它归结为第一个类型定义。如您所见，这需要一个ArrayLike<string> 参数并返回一个string 或undefined。这会产生您观察到的错误。 d3.max() 显然也是如此。

由于您知道您的 data.totalCount 都是数字，因此您可以轻松地将其作为泛型函数的类型参数传递：

let y0 = d3.scaleLinear().domain([
  d3.min<number>(data.totalCount), 
  d3.max<number>(data.totalCount)
]).range([this.height, 0]);

---

与您的问题没有直接关系的旁注：您可以使用d3.extent()，它将d3.min() 和d3.max() 组合在一个调用中。

let y0 = d3.scaleLinear()
  .domain(d3.extent<number>(data.totalCount))
  .range([this.height, 0]);