Elements are duplicated instead of moved in D3 with React-CodePudding

The

After button is clicked:

CodePudding user response：

I think you have a problem with svg select nodes, you are trying to selectAll('circle') but you need to select selectAll('text'). Therefore you draw a new text nodes instead of moving them. Try changing your useEffect to:

useEffect(() => { const svg = select(svgRef.current); svg.selectAll('text') .data(data) .join('text') .text(({ value }) => value) .attr('x', ({ x }) => x) .attr('y', ({ y }) => y); }, [data]);

If you want to add animation to the move, add:

useEffect(() => { const svg = select(svgRef.current); svg.selectAll('text') .data(data) .join('text') .text(({ value }) => value) .transition() .duration(1000) .attr('x', ({ x }) => x) .attr('y', ({ y }) => y); }, [data]);