d3图表覆盖新数据，不会删除旧数据

Question

我制作了一个D3 v5堆积区域条形图。

初始数据很好，但是当我想要更新它时，它不会按预期转换，而是将这些区域叠加在一起。

Codepen：https://codepen.io/bental/pen/NMygyB

主要问题在于这个函数，我处理输入/更新/退出数据的方式：

function plotArea(update) {
    const stack = d3.stack();
    stack.keys(keys);
    stack.order(d3.stackOrderReverse);

    const area = startFromZero => {
        const highestVal = getHighestValueForYAxis();
        return d3
            .area()
            .x(d => graphAxes.x(d.data.interval))
            .y0(d => (startFromZero ? highestVal : graphAxes.y(d[0])))
            .y1(d => (startFromZero ? highestVal : graphAxes.y(d[1])));
    };

    if (update) {
        dataPath
            .data(stack(data))
            .enter()
            .append('g')
            .attr('class', d => 'data-path type-' + d.key);
    } else {
        dataPath = svg
            .selectAll('.data-path')
            .data(stack(data))
            .enter()
            .append('g')
            .attr('class', d => 'data-path type-' + d.key);
    }

    dataPath.exit().remove();

    line = dataPath
        .append('path')
        .attr('class', 'area')
        .attr('d', area(true))
        .transition()
        .delay(200)
        .duration(700)
        .attr('d', area(false));
}