Javascript D3：堆叠条形图出口（）.remove（）不移除条形图

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

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

//this.x=我的x时间刻度
//这个。y=我的y刻度
//此.c=具有两种颜色（红色、蓝色）的色标
//this.chart=D3.select（）元素
让series=D3.stack（）.keys（['point'，'topPoint']）（this.barData）；
这张表
.append（'g'）
.selectAll（'g'）
.数据（系列）
.enter（）.append（'g'）
.attr（'class'，（d）=>{return d.key+'layer'；}）
.attr（'fill'，（d）=>{返回此.c（d.key）；}）
.selectAll（“.bar”）
.data（（d）=>{return d；}）
.输入（）
.append（'rect'）
.attr（'class'，'bar'）；
//更新阶段
this.chart.selectAll（'.bar'）.transition（）
.attr（'x'，（d）=>{返回此.x（this._parseTime（d.data.date））；}）
.attr（'y'，（d）=>{返回这个.y（d[1]）；}）
.attr（'height'，（d）=>{返回this.y（d[0]）-this.y（d[1]）；}）
.attr（'宽度'，15）；
//退出阶段
this.chart.selectAll（'.point.layer'）.selectAll（'.bar'）.exit（）.remove（）；
this.chart.selectAll（'.topPoint.layer'）.selectAll（'.bar'）.exit（）.remove（）；

---

当数据更改时，会绘制新的条形图，但它们会绘制在旧条形图上。

如果使用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(); 

let series=D3.stack（）.keys（['point'，'topPoint']）（this.barData）；
常量元素=this.chart
.append（'g'）
.selectAll（'g'）
.数据（系列）；
elements.enter（）.append（'g'）
.attr（'class'，（d）=>{return d.key+'layer'；}）
.attr（'fill'，（d）=>{返回此.c（d.key）；}）
.每个功能（d）{
d3.选择（本）
.append（'rect'）
.attr（'class'，'bar'）；
})
.merge（元素）//updatebase
.每个功能（d）{
d3.选择（这个）。选择（“.bar”）
.transition（）
.attr（'x'，（d）=>{返回此.x（this._parseTime（d.data.date））；}）
.attr（'y'，（d）=>{返回这个.y（d[1]）；}）
.attr（'height'，（d）=>{返回this.y（d[0]）-this.y（d[1]）；}）
.attr（'宽度'，15）；
}
//退出阶段
elements.exit（）.remove（）；

所以问题是我选择了要绑定和解除绑定的元素

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

---

与问题无关，但在使用箭头函数时，您不需要

返回值

。此外，您也不需要单个参数的括号。您可以提供fiddle吗？@GerardoFurtado最初它不是单个参数或单个参数。为了简化问题，我删除了大量代码。谢谢！但我已使其正常工作。发布现在回答。好的，对不起，我在没有任何解释的情况下发布了我的答案（我正要添加一些）。很高兴你解决了这个问题！