d3.js CoffeeScript类执行上下文

时间:2012-11-18 19:54:42

标签: coffeescript d3.js

我正在使用CoffeeScript类创建d3.js图表​​。我想在click事件中附加一个方法,然后根据点击的内容运行另一个方法:

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: ->

问题是在onClick方法中,执行上下文(“this”)是选择而不是Chart类,因此“runVideo不是函数”。如何从onClick方法中访问选择属性并运行runVideo方法?

1 个答案:

答案 0 :(得分:1)

在添加点击回调时,您想要以某种方式捕获this

你有几个选择:

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

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

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

然后你需要修改你的onClick

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