javascript - 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(): 数字;})[]'。类型“string”不可分配给类型“number |或 {valueOf(): number;}。

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

为什么要尝试将这些变量作为字符串读取？我做错了什么？

Answer 1

实际上有四个type definitions对于 d3.min() :

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]);