使用 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。
我一直无法发现我的错误,有什么想法吗?