D3js svg does not render on first page load

Question

I have a custom visualisation inside a lightning component which uses d3js.

My svg is well rendered whenever I hard refresh the record page containing the custom component, but does not display when I land on the page initially.

Code:

test.cmp

<aura:component  implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<ltng:require scripts="{!$Resource.d3 + '/d3.min.js'}"
              styles="{!$Resource.d3 + '/d3.css'}"
              afterScriptsLoaded="{!c.doInit}"/>
    <div aura:id="map" id="map" class="page-section"></div>
</aura:component>

testController.js

({

doInit: function (component, event, helper) { 
  
var jsonCircles = [
   { "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green" },
   { "x_axis": 70, "y_axis": 70, "radius": 20, "color" : "purple"},
   { "x_axis": 110, "y_axis": 100, "radius": 20, "color" : "red"}];
 
 var svgContainer = d3.select("div#map").append("svg")
                                     .attr("width", 200)
                                    .attr("height", 200);
 
var circles = svgContainer.selectAll("circle")
                         .data(jsonCircles)
                          .enter()
                          .append("circle");

var circleAttributes = circles
                       .attr("cx", function (d) { return d.x_axis; })
                       .attr("cy", function (d) { return d.y_axis; })
                       .attr("r", function (d) { return d.radius; })
                       .style("fill", function(d) { return d.color; });
                    
}
})

Answer 1

Found the issue:

On first page load, salesforce can render your component's html multiple times to manage facets.

I fixed my issue by using d3.selectAll() instead of d3.select() and subsequently added an svg to all the divs rendered