如何用D3 v7的d3.max获取分组柱状图Y轴域的最大值

要实现动态获取所有数值列的最大值来设置Y轴域，你需要完成两个关键步骤：提取并转换所有数值数据、计算全局最大值，具体实现如下：

1. 处理CSV数据类型 #

d3.csv默认会把所有字段读取为字符串，所以首先需要将数值列转换为数字类型。你可以在读入数据时直接处理：

const data = await d3.csv(src, d => {
  const parsed = { name: d.name };
  for (const key in d) {
    if (key !== 'name') {
      parsed[key] = +d[key];
    }
  }
  return parsed;
});

2. 计算所有数值列的全局最大值 #

通过flatMap遍历每个数据条目，提取所有数值字段的值并合并为一个数组，再用d3.max计算最大值：

// 精准排除name列，提取所有数值
const allNumericValues = data.flatMap(item => {
  return Object.entries(item)
    .filter(([key]) => key !== 'name')
    .map(([_, value]) => value);
});

// 获取全局最大值
const maxYValue = d3.max(allNumericValues);

如果不确定name是否为唯一非数值列，也可以通过值类型过滤：

const allNumericValues = data.flatMap(item => {
  return Object.values(item).filter(value => typeof value === 'number');
});

3. 动态设置Y轴域 #

最后用计算出的最大值替换静态值350：

y.domain([maxYValue, 0])
  .range([0, height]);

完整代码示例 #

const data = await d3.csv(src, d => {
  const parsed = { name: d.name };
  for (const key in d) {
    if (key !== 'name') {
      parsed[key] = +d[key];
    }
  }
  return parsed;
});

const allNumericValues = data.flatMap(item => {
  return Object.entries(item)
    .filter(([key]) => key !== 'name')
    .map(([_, value]) => value);
});

const maxYValue = d3.max(allNumericValues);

y.domain([maxYValue, 0])
  .range([0, height]);

这样无论你的CSV文件后续修改数值列的名称，代码都能自动计算出正确的最大值，无需手动调整静态值。

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