javascript - d3 : Why does this function not remove elements?

Question

在 d3 中工作时，我有一个函数调用可以正确绘制条形图，但它无法正确更新它。这是我的代码的重要部分:

  # Drawing Elements
  @svg = d3.select(@s).append('svg').attr('width',@w).attr('height',@h)
  @rects = @svg.selectAll('rect')
  @labels = @svg.selectAll('text')

  drawRects: (data) ->
    rects = @rects.data(data)
    rects.enter().append('rect')
    rects.exit().remove()
    rects.attr('x', (d,i) => this.xScale(i) )
      .attr('y', (d) => @h - this.yScale(d) )
      .attr('width', @w / @data.length - @pad)
      .attr('height', (d) => this.yScale(d) )
      .attr('fill','#FFC05C')


  drawLabels: (data) ->
    labels = @labels.data(data)
    labels.enter().append('text')
    labels.exit().remove()
    labels.text( (d) -> d )
      .attr('text-anchor','middle')
      .attr('x', (d,i) => this.xScale(i) + ((@w / @data.length - @pad)/2) )
      .attr('y', (d) => @h - this.yScale(d) + 15 )
      .attr('fill','white')

  update: (data) ->
    this.drawRects(data)
    this.drawLabels(data)

当我最初设置图表时，我创建了一些数据(在本例中是一个包含 20 个数字的数组)并调用绘制方法:

data = [1..20]
this.drawRects(data)
this.drawLabels(data)

图表绘制正确。

但是，如果第二次调用这些方法来更新数据，新数据将放置在 DOM 中，但旧数据也会留下，因此它只是创建一组全新的元素。

我在这里做错了什么，导致 .exit() 无法删除旧的 DOM 元素？

Answer 1

您需要重新选择 rect 和 text 元素并为其分配新数据:

drawRects: (data) ->
    rects = @svg.selectAll('rect').data(data)
    #...

drawLabels: (data) ->
    labels = @svg.selectAll('text').data(data)
    #...

在代码中，您始终将新数据分配给旧的(空)@rect 和(空)@labels 集合。对于这些空集合，数据将被视为“输入”，因此将创建新元素，并且不会删除任何内容。