我目前正在使用D3在一个React应用程序中构建一个饼图，我试图在悬停时做一个简单的不透明度变化，但无论出于什么原因，我的本地环境中没有发生这种效果。

g.selectAll('path')
    .data(pie(data))
    .enter()
    .append('path')
    .attr('fill', (data, index) => color(index))
    .attr('d', arc)
    .on('mouseover', function (event, d) {
        d3.select(this).transition()
            .duration(200)
            .attr('opacity', .5)
    })
    .on('mouseout', function (d, i) {
        d3.select(this).transition()
            .duration(200)
            .attr('opacity', 1)
    })

然而，当我把完全相同的代码放在Codepen（https://codepen.io/ddoria/pen/KKoQpOX）中时，效果就起作用了。