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中，但旧数据也会被遗忘，因此它只是创建了一组全新的元素。 / p>

我在这里做错了什么让.exit()不再删除旧的DOM元素？

Answer 1

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

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

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

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

d3：为什么这个功能不能删除元素？

1 个答案: