使用D3.js创建柱状图Y轴比例尺遇TS2345类型错误求助

我在用D3.js给柱状图Y轴创建线性比例尺，代码如下：

let yBar = scaleLinear()
  .range([height, 0])
  .domain([0, d3Array.max(datasets, d => d3Array.sum([d.asia, d.usa, d.uk]))]);

但TypeScript抛出错误：

TS2345: Argument of type '(number | undefined)[] is not assignable to parameter of type 'Iterable'

错误原因 #

问题核心在于两个潜在的undefined来源：

• d3Array.sum如果传入的数组包含undefined/null，或者数组为空，会返回undefined；
• 当d3Array.max遍历这些可能为undefined的结果时，最终也可能返回undefined；
• D3的domain方法要求参数必须是可迭代的NumberValue类型，undefined不符合类型约束，因此触发TS报错。

解决办法 #

• 给sum结果兜底：
  用|| 0确保d3Array.max的返回值始终为数字：

  let yBar = scaleLinear()
    .range([height, 0])
    .domain([0, d3Array.max(datasets, d => d3Array.sum([d.asia, d.usa, d.uk])) || 0]);
  

• 处理单个字段的空值：
  如果d.asia、d.usa、d.uk本身可能为undefined，先给每个字段兜底：

  let yBar = scaleLinear()
    .range([height, 0])
    .domain([0, d3Array.max(datasets, d => 
      d3Array.sum([d.asia || 0, d.usa || 0, d.uk || 0])
    ) || 0]);
  

• 严格定义数据集类型：
  从根源上约束datasets的字段类型，确保每个字段都是必填数字：

  interface DatasetItem {
    asia: number;
    usa: number;
    uk: number;
    // 其他字段
  }
  
  const datasets: DatasetItem[] = [/* 你的数据 */];
  
  let yBar = scaleLinear()
    .range([height, 0])
    .domain([0, d3Array.max(datasets, d => d3Array.sum([d.asia, d.usa, d.uk]))]);
  

内容的提问来源于stack exchange，提问作者The Dead Man