如何在Recharts中实现多图表共享Y-axis domain且主图表自动计算定义域？

这里提供两种实用方案，以常用的D3.js可视化场景为例，你可以根据自身代码结构选择：

方案1：先渲染主图表，复用其自动生成的Y轴域 #

适合需要先完成主图表渲染，再同步其他图表的场景：

• 第一步，基于主图表数据创建并渲染Y轴，让其自动计算domain：

// 主图表数据
const mainChartData = [{category: "A", value: 45}, {category: "B", value: 62}, ...];
const chartHeight = 400;

// 创建主图表的Y比例尺，自动基于数据计算domain
const mainYScale = d3.scaleLinear()
  .domain([0, d3.max(mainChartData, d => d.value)]) // 自动取主数据最大值作为上限
  .range([chartHeight, 0]);

// 渲染主图表的Y轴
const mainSvg = d3.select("#main-chart");
mainSvg.append("g")
  .attr("transform", "translate(50, 0)")
  .call(d3.axisLeft(mainYScale));

• 第二步，获取主图表Y比例尺的domain，直接应用到其他图表：

// 获取共享的Y轴域
const sharedYDomain = mainYScale.domain();

// 为其他图表创建Y比例尺，复用这个domain
const otherYScale = d3.scaleLinear()
  .domain(sharedYDomain)
  .range([chartHeight, 0]);

// 渲染其他图表的Y轴和柱子
const otherSvg = d3.select("#other-chart");
otherSvg.append("g")
  .attr("transform", "translate(50, 0)")
  .call(d3.axisLeft(otherYScale));

方案2：提前计算主数据极值，统一设置所有图表的Y轴域 #

如果不想依赖主图表渲染顺序，可提前计算主数据极值，直接作为所有图表的Y轴domain：

// 先计算主数据的Y轴极值（有负值需同时取min和max）
const mainDataMax = d3.max(mainChartData, d => d.value);
const sharedDomain = [0, mainDataMax];

// 主图表的Y比例尺
const mainYScale = d3.scaleLinear()
  .domain(sharedDomain)
  .range([chartHeight, 0]);

// 其他图表的Y比例尺直接复用sharedDomain
const otherYScale1 = d3.scaleLinear()
  .domain(sharedDomain)
  .range([chartHeight, 0]);
const otherYScale2 = d3.scaleLinear()
  .domain(sharedDomain)
  .range([chartHeight, 0]);

这种方式更灵活，无需等待主图表渲染完成，所有图表Y轴域从一开始就统一，且主图表domain依然基于自身数据自动计算。

若使用其他可视化库（如Chart.js），思路一致：先获取主图表的Y轴范围（比如Chart.js中通过chart.scales.y.max获取），再将其他图表的Y轴min和max设为对应值即可。

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