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：类型＆＃39;字符串[]＆＃39;的参数不能指定类型＆＃39;数字|的参数或（{valueOf（）：number;}）[]＆＃39;。输入＆＃39; string＆＃39;不能分配类型＆＃39;数字|或{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.min()和d3.max()组合的d3.extent()。

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

D3.js v5 Domain（）没有为数组取变量

1 个答案: