javascript - 如果从函数 (d) 设置，d3 鼠标悬停事件不会正确触发

Question

我正在制作一个饼图，它在鼠标悬停时有一个弹出动画，这是我从 Mike Bostocks 示例中复制的标准动画。它工作正常，但在我的情况下，我想在鼠标悬停事件期间更改饼图中心的文本。

代码可以在这里看到http://codepen.io/ObiEff/pen/KpzOEz

我已经尝试将事件更改为

.on("mouseover",function (d,i){

                arcTweenOut(radius,0); 
                d3.select("#costTitle")
                .text(data[i].label); 
                d3.select("#cost")
                .text("$"+data[i].value); 

            }) 

这样做确实可以使文本正确更改，但是不会弹出圆弧。我尝试了几种不同的方法来让它们都开火，但无法弄清楚。

如果不在鼠标悬停绑定(bind)中添加函数 (d)，事件函数只会触发一次(在我的控制台中)，那是在事件绑定(bind)时，但是当它通过函数 (d) 绑定(bind)时，它会在每次触发时触发鼠标悬停，但不执行动画。

Answer 1

它与 JavaScript 中的作用域有关，您可以阅读更多关于 here 的内容.我通过将文本更改放入 arcTweenOut 函数返回的函数中来使您的代码正常工作。 http://codepen.io/anon/pen/WvxeQw

        function arcTweenOut(outerRadius, delay)
    {   
        // Added parameters to accept what mouseover sends
        return function(a, index) {
          // Added code here to change text/title
            d3.select("#costTitle")
            .text(data[index].label); 
            d3.select("#cost")
            .text("$"+data[index].value); 
          // END NEW CODE
            d3.select(this).transition()
              .delay(delay)
              .attrTween("d",function(d,i) {
                 var i = d3.interpolate(d.outerRadius, outerRadius);
                 return function(t) {
                    d.outerRadius = i(t);
                    return arc(d); 
                };
            });
        };
    }