使用d3提示关闭问题 [英] Closure issue using d3 tip

问题描述

另一个javascript初学者关闭问题...但是，我一直在阅读关于闭包绑定的各种来源（最有帮助的），但我仍然无法完全转移到我的具体问题。

Yet another javascript beginner with a closure issue... However, I have been reading up on various sources on closure binding (most helpful), but I still can't fully transfer this to my specific issue.

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

For convenience, I have prepared a minimal jsfiddle. My problem is to use d3-tip with multiple, different rendering logics. In the jsfiddle you can see a plot on the top and one below. When you hover the mouse over the boxes, each plot should generate its own tooltip. However, as you can see, the first plot also uses the tooltip callback of the second plot. Or more general: The last tooltip callback overwrites previous callbacks.

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

The implementation follows some standard d3 / d3-tip patterns. Basiscally I have multiple plotting functions like this:

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));
}

代码 c $ c> .on（mouseover，tip.show）。然而在我的实际代码中，我需要在 mouseover 中的附加逻辑，这就是为什么我需要一个包装闭包。我的问题是：

The code does work when simply using .on("mouseover", tip.show). However in my actual code, I need additional logic in mouseover, which is why I need a wrapping closure. My questions are:

• 为什么闭包关闭了错误的提示变量？或者：第二个绘图函数如何修改第一个函数的闭包绑定？


• 一个经验javascript程序员如何解决这个问题？

• Why does the closure close over the wrong tip variable? Or rather: How can the second plotting function modify the closure binding of the first function?
• How would an experience javascript programmer solve this?

注意：在jsfiddle中，两个绘图函数（和工具提示逻辑）几乎相同，保持示例很小，这建议使用相同的 tipRenderer 反正。我的实际用例是一个具有完全不同的图的页面，因此，工具提示渲染不能（或不应该）统一。

Note: In the jsfiddle the two plotting functions (and the tooltip logics) are almost identical to keep the example small, which suggest to simply use the same tipRenderer anyway. My actual use case is a page with entirely different plots, and thus, the tooltip rendering cannot (or should not) be unified.

推荐答案

如果你不使用 var 声明你的变量，它会变成一个全局变量。

If you don't declare your variable using var, it becomes a global.

这两个函数中的简单修复：

So, this is the simple fix, inside both functions:

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

这是您更新的小提琴： https://jsfiddle.net/wd08acg1/

Here is your updated fiddle: https://jsfiddle.net/wd08acg1/

这篇关于使用d3提示关闭问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！