Question

I am creating a d3.js chart using a CoffeeScript class. I would like to attach a method to a click event, and then run another method depending on what was clicked:

class @Chart

  drawChart: ->
     ...

    dataArea
      .enter()
        .append("path")
          .on("click", @onClick);
     ...

  onClick: ->
    if d3.select(this).attr("type") == 'video'
      @runVideo(d3.select(this).attr("title"))

  runVideo: ->

The problem is that in the onClick method the execution context (“this”) is the selection and not the Chart class, so “runVideo is not a function.” How can I access selection attributes from within the onClick method and also run the runVideo method?

Answer 1

What you want to do is somehow capture the this when you add the click callback.

You have a few options here:

// The Coffeescript way:
.on("click", (args...) => @onClick(args...));

// The jQuery way:
.on("click", $.proxy(@onClick, @))

// The ECMAscript5 way:
.on("click", @onClick.bind(@))

Then you need to fix your onClick to this:

onClick: (evt) ->
  if d3.select(evt.target).attr("type") == 'video'
    @runVideo(d3.select(evt.target).attr("title"))