javascript - D3 : Stacked bar chart exit(). remove() 不删除栏

Question

我定义了以下进入/更新/退出阶段。

// this.x = my x time scale
// this.y = my y scale
// this.c = a color scale with 2 colors (red,blue)
// this.chart = D3.select() element

let series = D3.stack().keys(['point', 'topPoint'])(<any[]>this.barData);
    this.chart
      .append('g')
      .selectAll('g')
      .data(series)
      .enter().append('g')
        .attr('class', (d) => {return d.key + ' layer';})
        .attr('fill', (d) => {return this.c(d.key);})
      .selectAll('.bar')
      .data((d) => {return d;})
      .enter()
        .append('rect')
        .attr('class', 'bar');

    // Update Phase
    this.chart.selectAll('.bar').transition()
      .attr('x',    (d) => {return this.x(this._parseTime(d.data.date));})
      .attr('y',      (d) => {return this.y(d[1]); })
      .attr('height', (d) => {return this.y(d[0]) - this.y(d[1]);})
      .attr('width', 15);

    // Exit phase
    this.chart.selectAll('.point.layer').selectAll('.bar').exit().remove();
    this.chart.selectAll('.topPoint.layer').selectAll('.bar').exit().remove();

当数据发生变化时，会绘制新的柱状图，但它们会覆盖旧柱状图。

Answer 1

如果你使用 d3 v4 试试这个:

let series = D3.stack().keys(['point', 'topPoint'])(<any[]>this.barData);
const elements = this.chart
            .append('g')
            .selectAll('g')
            .data(series);
    elements.enter().append('g')
            .attr('class', (d) => {return d.key + ' layer';})
            .attr('fill', (d) => {return this.c(d.key);})
            .each(function(d){
                d3.select(this)
                        .append('rect')
                        .attr('class', 'bar');
            })
            .merge(elements)  // updatePhase
            .each(function(d){
                d3.select(this).select(".bar")
                    .transition()
                    .attr('x',    (d) => {return this.x(this._parseTime(d.data.date));})
                    .attr('y',      (d) => {return this.y(d[1]); })
                    .attr('height', (d) => {return this.y(d[0]) - this.y(d[1]);})
                    .attr('width', 15);
            }

    // Exit phase
    elements.exit().remove();