React 應用程序中的 D3 餅圖 hover 效果不起作用

Question

我目前正在使用 D3 在 React 應用程序中構建餅圖，並且我正在嘗試對 hover 進行簡單的不透明度更改，但無論出於何種原因，這種效果都不會在我的本地環境中發生。

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 ) 時，效果會起作用。 知道發生了什么嗎？

Answer 1

想通了這個問題。 這是因為 useEffect 被調用了兩次，這是在 React 18 中以開發模式引入的。 為了解決這個問題，在 src/index.js 的渲染調用中刪除了 <React.StrictMode> 標簽