D3：堆积的条形图exit（）。remove（）不删除条形

Question

I have the following enter / update / exit phases defined.

// 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();

When the data changes, the new bars are drawn, but they are drawn over the old bars.

Answer 1

if you use d3 v4 try this:

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(); 

Answer 2

So the problem was my selecting of the elements I wish to bind and unbind.

this.chart
      .selectAll('.layer')
      .data(series)
      .enter()
        .append('g')
          .attr('class', (d) => {return d.key + ' layer';});

    // Set the enter phase for the bars within the groups, with the data derived from the layer data binding
    this.chart.selectAll('.layer')
      .selectAll('.bar')
        .data((d) => {return d;})
        .enter()
          .append('rect')
          .attr('class', 'bar');

    // Set the update phase for the layers to fill the groups with the relevant color
    let layers = this.chart.selectAll('.layer').attr('fill', (d) => {return this.c(d.key);});

    // Update Phase
    let bars;
    if(this.animate) {
      // Set the update phase of the bar data based on the data derived from the layer update phase
      bars = layers.selectAll('.bar').data((d) => {return d;}).transition();
    } else {
      bars = layers.selectAll('.bar').data((d) => {return d;});
    }

    // Set the update phase of the bar data based on the data derived from the layer update phase
    bars.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('.layer').data(series).exit().remove();