无法将数组定义的属性名传入D3 scaleLinear函数的解决方法

你之前写法的核心问题是：模板字符串拼接得到的是类似"d.privated.public"的普通字符串，并没有实际读取数据对象d上的对应属性，自然无法计算出正确的累加值。

JS中访问对象属性有两种语法：

• 点语法：固定属性名时用，比如d.public
• 方括号语法：属性名存在变量里时用，比如const key = 'public'; d[key]，这才是适配你存放在数组中动态键名的正确写法。

用数组reduce方法遍历预定义的keys数组，累加每个数据对象对应键的数值即可，这个方案不限制keys的长度，后续新增统计字段只需要往keys数组里加键名，不需要修改比例尺逻辑：

const keys = ["private", "public"];
const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => {
    // 初始累加值为0，遍历所有key累加对应属性值
    return keys.reduce((sum, currentKey) => sum + d[currentKey], 0);
  })])
  .range([height, 0]);

如果你确定永远只需要统计两个字段，也可以直接用方括号语法硬编码索引取值，不过扩展性较差：

const y = d3.scaleLinear()
  .domain([0, d3.max(data, d => d[keys[0]] + d[keys[1]])])
  .range([height, 0]);

注意：请确保keys对应的所有属性值都是数值类型，如果存在字符串格式的数字，先通过Number()转类型，否则加法会触发字符串拼接，导致计算结果错误。

内容的提问来源于stack exchange，提问作者JamesE