2

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; });
                    
}
})
2
  • This might not make much sense, have you tried with Disabling Caching Setting.
    – Raul
    Commented Aug 17, 2020 at 16:23
  • @Raul thanks for the good idea but did not work unfortunately Commented Aug 18, 2020 at 8:21

1 Answer 1

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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .