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)

グラフは正しく描画されます。

ただし、データを更新するためにこれらのメソッドが 2 回呼び出されると、新しいデータが 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 に答える