D3:正确绘制元素，但不向dom添加新数据

Question

使用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。

我还没能发现我的错误，你有什么想法吗?

Answer 1

您在更新中忘记了.enter

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

作为一个注意，你还应该添加一个.exit来更新