javascript - 使用 d3 提示的关闭问题

Question

又一个有闭包问题的 javascript 初学者......然而，我一直在阅读关于闭包绑定(bind)的各种来源(most helpful)，但我仍然无法将其完全转移到我的特定问题。

为了方便，我准备了一个minimal jsfiddle .我的问题是使用 d3-tip具有多种不同的渲染逻辑。在 jsfiddle 中，您可以在顶部和下方看到一个图。当您将鼠标悬停在方框上时，每个图都应生成自己的工具提示。但是，如您所见，第一个图还使用了第二个图的工具提示回调。或者更一般的:最后一个工具提示回调覆盖之前的回调。

实现遵循一些标准的 d3/d3-tip 模式。基本上我有多个像这样的绘图函数:

function somePlottingFunction(data, locator) {
   var svg = ... // append svg

   // define plot-specific tooltip logic
   function tipRenderer(d) {
     return "Renderer of plot 1: " + d;
   } 
   tip = d3.tip()
           .attr("class", "d3-tip")
           .html(tipRenderer);
   svg.call(tip);

   // and a .enter()
   svg.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      // ... attr ...
      .on("mouseover", (d) => tip.show(d)) // <= issue here
      .on("mouseout", (d) => tip.hide(d));
}

当简单地使用 .on("mouseover", tip.show) 时，代码确实有效。然而，在我的实际代码中，我需要在 mouseover 中添加额外的逻辑，这就是为什么我需要一个包装闭包。我的问题是:

• 为什么闭包关闭错误的 tip 变量？或者更确切地说:第二个绘图函数如何修改第一个函数的闭包绑定(bind)？
• 经验丰富的 javascript 程序员会如何解决这个问题？

注意:在 jsfiddle 中，两个绘图函数(和工具提示逻辑)几乎相同以保持示例较小，这建议无论如何都简单地使用相同的 tipRenderer。我的实际用例是一个具有完全不同情节的页面，因此不能(或不应该)统一工具提示渲染。

Answer 1

如果您不使用 var 声明您的变量，它将成为一个全局变量。

所以，这是两个函数内部的简单修复:

var tip = d3.tip()
    .attr("class", "d3-tip")
    .direction("s")
    .html(tipRenderer);

这是您更新的 fiddle :https://jsfiddle.net/wd08acg1/