如果从函数 (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); 

            })

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

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

Answer 1

它与 JavaScript 中的范围有关，您可以阅读有关 here . I've made your code work by putting the text changes in the function that the arcTweenOut function returns. 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); 
                };
            });
        };
    }

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

d3 mouse over event doesn't fire correctly if set from function(d)

javascript

visualization

d3.js

pie-chart