duplicate calls to d3.append() group on React.useEffect()


Im trying to put circles in groups, but when the useEffect is triggered, it duplicate groups due to append, here is the code:

 useEffect(() => {
      

        const svg = d3.select(areaChart.current)
                     .attr('width', dimensions.width)
                    .attr('height', dimensions.height)
                    .style('background-color','white') 
        var g = svg.append("g").attr("transform", "translate(" + dimensions.width / 2 + "," + dimensions.height / 2 + ")");
          
        

        const nodo = 
        g
        .selectAll("circle")
        .data(props.data.channel)
        .join("circle")
        .attr("id", function(d,i){return 'name' + i}  )
        //.attr("transform", "translate("+dimensions.width/2 + "," + dimensions.height/2 + ")")        
        .attr('cx', function(d,i) { 
            return (dimensions.width/4)*Math.cos(2 * Math.PI * ((i/ props.data.channel.length)+ 0.75)) } )
        .attr('cy', function(d,i) {     
                return (dimensions.height/4)*Math.sin(2 * Math.PI * ((i/ props.data.channel.length) + 0.75)) } )
        .attr("r", d => d.numeroInterv);
     
    
      }, [props.data]);

I tried to use the join() selector in g group, but it doesnt work.

Source: React – Stack Overflow

November 28, 2021
Category : News
Tags: D3.js | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.