Question

我在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) ->
        ...

之前我在similar question关于点击事件的@loganfsmyth得到了很多帮助。这将表明这些方面的答案：

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

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

不幸的是，这似乎不起作用。因此，另一种表达这个问题的方法可能是“什么相当于事件鼠标的event.target？”

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

你能帮忙吗？

Answer 1

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

d3.js / CoffeeScript：在鼠标悬停时访问类和路径的执行上下文（this）

1 个答案: