1

在 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 元素？

4

1 回答 1

1

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

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

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

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

于 2012-12-14T15:59:42.513 回答