D3：堆积条形图 exit().remove() 不删除条形图答案

【问题标题】：D3: Stacked bar chart exit().remove() not removing barsD3：堆积条形图 exit().remove() 不删除条形图
【发布时间】：2017-06-14 06:05:01
【问题描述】：

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

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

当数据发生变化时，会绘制新的条形图，但会在旧条形图上绘制。

【问题讨论】：

与问题无关，但使用箭头函数时不需要return。此外，单个参数不需要括号。
你能提供小提琴吗？
@GerardoFurtado 最初它不是单个参数或单个参数。我去掉了很多代码来简化问题。

标签： javascript angularjs d3.js

【解决方案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();

【讨论】：

谢谢！但我得到了它的工作。现在发布答案。
好的，对不起，我没有任何解释就发布了我的答案（我正要添加一些）。很高兴你解决了这个问题！

【解决方案2】：

所以问题是我选择了要绑定和取消绑定的元素。

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

【讨论】：