d3 tipを使用した閉鎖の問題

Question

閉鎖の問題を伴うもう1つのjavascriptの初心者...しかし、私は閉鎖のバインディング（most helpful）に関するさまざまなソースを読んできましたが、これを私の特定の問題に完全に移すことはできません。

便宜上、私はminimal jsfiddleを用意しました。私の問題は、d3-tipを複数の異なるレンダリングロジックで使用することです。 jsfiddleでは、上部と下部にプロットが表示されます。ボックスの上にマウスを置くと、各プロットは独自のツールチップを生成するはずです。ただし、最初のプロットでは2番目のプロットのツールチップコールバックも使用されています。より一般的には、最後のツールチップコールバックが前のコールバックを上書きします。

この実装は、いくつかの標準的なd3/d3チップパターンに従います。 Basiscally私はこのような複数の作図機能を持っています。単に.on("mouseover", tip.show)を使用した場合

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

コードは作業を行います。しかし私の実際のコードでは、mouseoverに追加のロジックが必要です。そのため、ラッピングクロージャが必要です。私の質問は次のとおりです：

• なぜ閉鎖は間違ったtip変数の上に閉じますか？ 2番目のプロット関数は、最初の関数のクロージャバインディングをどのように変更できますか？
• どのように経験のjavascriptプログラマーはこれを解決するだろうか？

注：jsfiddleでは、2つのプロット関数（およびツールチップロジック）が小さい例を続けるとほぼ同一であり、単に、とにかく同じtipRendererを使用することを示唆しています。私の実際のユースケースは全く異なるプロットを持つページなので、ツールチップのレンダリングは統一できません。

Answer 1

varを使用して変数を宣言しないと、変数はグローバルになります。

だから、これは両方の機能内部簡単な修正、次のとおりです。https://jsfiddle.net/wd08acg1/