0

我在 CoffeeScript 类中使用d3.js Streamgraph 。我已经对其进行了调整，以便在鼠标悬停时路径的颜色会发生变化并出现工具提示。

现在我想将一些工具提示逻辑提取到一个单独的函数中。

我可以将执行上下文调整为一个或另一个，但不知道如何同时传递：

class Graph

    render: ->
        ...
        dataArea.enter()
          .append("path")
              .on("mouseover", @onMouseOver)            # Option 1 - Pass path context
              .on("mouseover", @onMouseOver.bind(@))    # Option 2 - Pass class context

    onMouseOver: (data) ->
        d3.select(this).attr("class", "")   # 1.  Depends on path context (to adjust styling)
        @tooltipHelper(data)                # 2.  Depends on class context (which holds helper function)

    tooltipHelper: (data) ->
        ...

以前我从@loganfsmyth 得到了一些关于点击事件的类似问题的帮助。这将提出一个沿着这些思路的答案：

.on("mouseover", (d) => @onMouseOver(d))

onMouseOver: (data) ->
  d3.select(data.target).attr("class", "")

不幸的是，这似乎不起作用。因此，表达这个问题的另一种方式可能是“鼠标悬停事件的 event.target 等价物是什么？”

同样相关的是@meetamit 的这个答案。它建议通过将this（Graph 的实例）分配给在闭包外部声明的变量来解决这个问题，但我想这在 CoffeeScript 中是不可能的，因为这会将所有内容都放入闭包中。

你能帮我吗？

4

1 回答 1

1

在这些情况下，您可以使用全局变量d3.event来访问您需要的所有信息。

于 2013-07-09T12:56:03.283 回答