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 回答