d3.js/CoffeeScript:访问mouseover中类和路径的执行上下文(this）

d3.js / CoffeeScript: Access execution context (this) of both class and path in mouseover

本文关键字：执行 路径 上下文 this CoffeeScript js 访问 mouseover d3      更新时间：2023-09-26

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

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

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

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

之前，我从@loganofsmyth那里得到了一些关于点击事件的类似问题的帮助。这将提出一个大致的答案：

.on("mouseover", (d) => @onMouseOver(d))
onMouseOver: (data) ->
  d3.select(data.target).attr("class", "")

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

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

你能帮忙吗？

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

相关文章：