D3.js正负值堆叠面积图问题：消除空白及替代方法咨询

自定义堆叠偏移函数 #

stackOffsetDiverging的默认逻辑可能在正负值交替堆叠时产生空白，你可以手动实现偏移逻辑，让正值从0向上堆叠，负值从0向下堆叠，避免中间空隙：

const customDivergingOffset = (series) => {
  let positiveBase = 0;
  let negativeBase = 0;
  series.forEach(d => {
    d.forEach(p => {
      // 处理正值：从当前正基准线向上堆叠
      if (p[1] >= 0) {
        p[0] = positiveBase;
        positiveBase = p[1];
      } 
      // 处理负值：从当前负基准线向下堆叠
      else {
        p[1] = negativeBase;
        negativeBase = p[0];
      }
    });
  });
  return series;
};

// 使用自定义偏移替代默认的stackOffsetDiverging
const stack = d3.stack()
  .keys(yourDataKeys)
  .offset(customDivergingOffset);

分离正负系列独立堆叠 #

把数据拆分为正值组和负值组，分别进行堆叠后再绘制，彻底避免正负堆叠的相互干扰：

1. 拆分数据并预处理负值（取绝对值方便堆叠）

const keys = ['category1', 'category2', 'category3']; // 你的数据类别键
const positiveKeys = keys.filter(key => data.some(d => d[key] > 0));
const negativeKeys = keys.filter(key => data.some(d => d[key] < 0));

// 预处理负值数据：取绝对值，后续绘制时反向y轴映射
const negativeData = data.map(d => {
  const obj = {...d};
  negativeKeys.forEach(key => obj[key] = Math.abs(obj[key] || 0));
  return obj;
});

2. 分别创建堆叠器并生成系列

const positiveStack = d3.stack().keys(positiveKeys).offset(d3.stackOffsetNone);
const positiveSeries = positiveStack(data);

const negativeStack = d3.stack().keys(negativeKeys).offset(d3.stackOffsetNone);
const negativeSeries = negativeStack(negativeData);

3. 分别绘制正负堆叠面积

// 绘制正值堆叠面积
svg.selectAll('.positive-area')
  .data(positiveSeries)
  .join('path')
  .attr('class', 'positive-area')
  .attr('d', d3.area()
    .x(d => xScale(d.data.xAxisField))
    .y0(d => yScale(d[0]))
    .y1(d => yScale(d[1]))
  )
  .style('fill', d => colorScale(d.key));

// 绘制负值堆叠面积（从y=0向下延伸）
svg.selectAll('.negative-area')
  .data(negativeSeries)
  .join('path')
  .attr('class', 'negative-area')
  .attr('d', d3.area()
    .x(d => xScale(d.data.xAxisField))
    .y0(yScale(0))
    .y1(d => yScale(d[1]))
  )
  .style('fill', d => colorScale(d.key));

检查并预处理数据缺失值 #

空白区域也可能是因为部分类别在某些x轴节点上存在缺失值或0值，导致堆叠计算断层。你可以预处理数据，确保每个类别在所有x轴点都有有效值（缺失补0）：

const processedData = data.map(d => {
  const obj = {...d};
  keys.forEach(key => {
    obj[key] = obj[key] ?? 0; // 空值或undefined补0
  });
  return obj;
});

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