D3.js曲线堆叠面积图着色异常问题求助

问题分析 #

你的曲线堆叠面积图中，本该显示紫色的区域呈现为红金色，且该区域对应月份的数值为0，但数据与其他库生成正确图表时一致。核心问题大概率出在曲线插值导致的路径异常或堆叠数据与颜色映射的匹配问题上。

解决方案 #

1. 验证颜色映射与堆叠数据的一致性 #

首先确认每个堆叠层的key是否正确对应到了预期的颜色。在填充颜色的回调中添加日志打印，检查key和对应颜色是否匹配：

.style('fill', (d: any) => {
    console.log(`系列key: ${d.key}, 对应颜色: ${color(d.key)}`); // 新增日志
    return color(d.key) as string;
});

如果日志显示紫色对应的key没有被分配到目标区域，说明堆叠数据的key存在绑定错误，需要检查keys数组与data.lineColors的顺序是否完全对应。

2. 更换稳定的曲线插值方式 #

d3.curveNatural在处理y0和y1相等（即数值为0）的点时，可能生成异常的贝塞尔曲线，导致相邻堆叠层的颜色“渗透”过来。建议改用对平线更友好的插值方式，比如curveMonotoneX或curveLinear：

const area = d3.area()
        .x((d: any) => x(new Date(d.data['period']))!)
        .y0((d: any) => y(d[0])!)
        .y1((d: any) => y(d[1])!)
        .curve(d3.curveMonotoneX); // 替换为稳定的插值方式

3. 确保0值系列的堆叠数据完整性 #

检查stackedData中对应紫色系列的每个数据点，确认非0月份的y0和y1值是否正确生成。如果该系列仅在5、6月为0，其他月份有值，堆叠数据应正常生成面积路径；如果该系列全量为0，area会生成无面积的闭合路径，此时需要确认数据是否正确。

修正后的完整代码示例 #

const stackedData = d3.stack()
        .keys(keys)(data.data);

const color = d3.scaleOrdinal()
        .domain(keys)
        .range(data.lineColors);

// 改用curveMonotoneX避免插值异常
const area = d3.area()
        .x((d: any) => x(new Date(d.data['period']))!)
        .y0((d: any) => y(d[0])!)
        .y1((d: any) => y(d[1])!)
        .curve(d3.curveMonotoneX);

svg.selectAll('#chart')
        .data(stackedData)
        .enter()
        .append('path')
        .attr('d', (d: any) => area(d))
        .style('fill', (d: any) => {
            // 可选：添加日志验证映射关系
            // console.log(`系列key: ${d.key}, 对应颜色: ${color(d.key)}`);
            return color(d.key) as string;
        });

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