d3.js CoffeeScript类执行上下文

Question

我正在使用CoffeeScript类创建d3.js图表​​。我想的方法连接到一个点击事件，然后运行取决于被点击了什么其他方法：

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方法执行上下文（“本”）是选择和不是Chart类，所以“runVideo不是函数”。我如何从onClick方法中访问选择属性并运行runVideo方法？

Answer 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"))