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()');
}