d3.js CoffeeScript 类执行上下文答案

【问题标题】：d3.js CoffeeScript class execution contextd3.js CoffeeScript 类执行上下文
【发布时间】：2012-11-19 04:26:53
【问题描述】：

我正在使用 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 方法中，执行上下文（“this”）是选择而不是 Chart 类，因此“runVideo 不是函数”。如何从 onClick 方法中访问选择属性并运行 runVideo 方法？

【问题讨论】：

标签： coffeescript d3.js

【解决方案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"))

【讨论】：