Диаграмма d3 накладывает новые данные, не удаляет старые - PullRequest
Новая
       12

Диаграмма d3 накладывает новые данные, не удаляет старые

0 голосов
/ 09 мая 2018

Я сделал гистограмму с накоплением 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));
}
...