1

I am using D3, a 3rd party JS library, to create a bar chart and a progression chart on a lightning component. I am using the following line to load the library.

<ltng:require scripts='/resource/D3js/d3.js' afterScriptsLoaded="{!c.D3Loaded}"/>

The charts load just fine on a custom home page for a lightning app that I've created. However, if I click on a different tab in the app and then click "Home" again, the charts are no longer there.

I'm assuming it has something to do with the component renderer, but not sure what needs to be changed so that they always load.

Controller:

D3Loaded : function(component, event, helper){
    console.log('PortfolioManagementHomeTable.controller.D3Loaded() -- Entry()');
    helper.loadBarChart(component, event, helper);
    helper.loadProgressChart(component, event, helper);
    console.log('PortfolioManagementHomeTable.controller.D3Loaded() -- Exit()');
}

Helper:

loadBarChart : function(component, event, helper){
    console.log('PortfolioManagementHomeTable.helper.loadBarChart() -- Entry()');
    var barChartClass = '.' + component.get('v.barChartClass');
    var svg = d3.select(barChartClass).selectAll("svg"),
      margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = +svg.attr("width") - margin.left - margin.right,
      height = +svg.attr("height") - margin.top - margin.bottom;
    console.log('PortfolioManagementHomeTable.helper.loadBarChart() -- Exit()');        
},

loadProgressChart : function(component, event, helper){
    console.log('PortfolioManagementHomeTable.helper.loadProgressChart() -- Entry()');
    var progressBarClass = '.' + component.get('v.progressBarClass');
    var svg = d3.select(progressBarClass)
      .append('svg')
      .attr('height', 100)
      .attr('width', barWidth);
    console.log('PortfolioManagementHomeTable.helper.loadProgressChart() -- Exit()');
}
  • You chould try useAppcache="true" in aura:application tag? Recommended to use once you finish development, developer.salesforce.com/docs/atlas.en-us.lightning.meta/… – Cloud Ninja Jan 25 '17 at 1:48
  • Look like an issue discussed here – Praveen Jan 25 '17 at 17:21
  • Hi Praveen, I came across that post when I was looking around for an answer, but I'm not sure how I would implement it in this situation. The two charts I'm creating are part of a table that has several rows (# of charts = 2x the number of rows) so I'm not sure how Aura Id would help since it can't be dynamic. I've added snippets of my code (not all of it as there's a lot of logic that has no impact on any on this), so you and others can see how I am selecting the charts. The bar chart and progression chart have unique class names that are tied to the Id of the record for that row. – user3562811 Jan 26 '17 at 15:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.