Question

Using d3, I have some simple markup like this:

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

I have an object that uses d3 to render. I’ve got a number of these that draw charts and graphs, but this one just prints a log.

Here’s the code:

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)

To initialize this I call it like so:

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

This correctly selects the div and renders the message into it.

However, if I try to add log messages in the console:

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

… this does not get rendered to the DOM. If I call log.data in the console I see the data is there, it just didn’t make it to the DOM.

I haven’t been able to spot my mistake, any ideas?

Answer 1

You forgot .enter in update

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

as a note you should also add a .exit to update