1

d3を使用すると、次のような単純なマークアップがあります。

<div id="my-log"></div>

d3を使用してレンダリングするオブジェクトがあります。チャートやグラフを描くものはたくさんありますが、これはログを印刷するだけです。

コードは次のとおりです。

class Log

  # Run on DOM Ready
  constructor: (selector,data) ->
    @s = selector
    @data = data || this.mockData()
    this.setup()
    this.draw()

  # Append a message onto the end of the log. Optionally shift the first point off.
  pushData: (message, shift = false) ->
    @data.push message
    @data.shift() if shift
    this.update()

  mockData: ->
    [{
      sender: 'tester',
      message: 'foo bar baz'
    }]

  template: (data) ->
    """
    <div class="sender">#{data.sender}</div>
    <div class="message">#{data.message}</div>
    """

  setup: ->
    @container = d3.select(@s).append('ul').attr('class','log')

  draw: ->
    @container.selectAll('li')
      .data( @data )
    .enter().append('li')
      .html (d) => this.template(d)

  update: ->
    @container.selectAll('li')
      .data( @data )
      .html (d) => this.template(d)

これを初期化するために、私はそれを次のように呼びます：

jQuery ->
  myLog = new Log 'div#my-log'

これにより、divが正しく選択され、メッセージがその中にレンダリングされます。

ただし、コンソールにログメッセージを追加しようとすると、次のようになります。

log.pushData({sender:'test', message:'foo'});

...これはDOMにレンダリングされません。コンソールで呼び出すlog.dataと、データがそこにあることがわかりますが、DOMに到達しませんでした。

私は自分の間違いを見つけることができませんでした、何かアイデアはありますか？

4

1 に答える 1

1

.enterアップデートを忘れた

update: ->
    @container.selectAll('li')
      .data( @data )
    .enter().append('li')
      .html (d) => this.template(d)

.exitメモとして、更新するためにを追加する必要もあります

于 2012-12-23T21:53:07.197 に答える