javascript - d3 : drawing elements correctly but not adding new data to the 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 进行更新