Updating force-graph on D3. Graph duplicates instead of updating-CodePudding

Could anyone please help me with the update pattern? For now this is what I get when I give my graph React component new data... the old one stays... This is where I have my code

CodePudding user response：

I think your problem is here on GraphGenerator.jsx:

    svgRef.current = d3.select('#viz')
        .attr('width', svgWidth)
        .attr('height', svgHeight)
        .append('g') // a new group is appended

You're appending a new g element each time. That new element has no data, so nothing is removed or updated in the join. If you remove the .append('g') it should work.

EDIT:

Furthur down in your node creation you use:

    const circles = svgRef.current
        .selectAll()
        .data(NODES)
        .join("g");

You aren't selecting anything, so nothing can be updated. Use this there:

const circles = svgRef.current
            .selectAll('.node')
            .data(NODES)
            .join("g")
            .classed('node',true)