addGraph vs adding the graph synchronously

[gabrielfagundez]

We are using nvd3 in our project, and also we are using Jasmine for testing purposes. We are having some issues, while spying the d3.select method, because it is being called asynchronously. So, we need to know what's the reason behind the addGraph method. We investigated the git history, and the method is inherited from the private repo (there is no commit message or explanation on why this method was added).

Can you explain us (to me, and to the community using nvd3) why should we use addGraph, instead of creating the graph synchronously? I mean, we need to know the difference between this code:

nv.addGraph(function() {
      var chart = nv.models.lineWithFocusChart();
      var chartContainer = element.find('svg').uniqueId();
      chart.xAxis
          .tickFormat(d3.format(',f'));
      chart.yAxis
          .tickFormat(d3.format(',.2f'));
      chart.y2Axis
          .tickFormat(d3.format(',.2f'));
      d3.select('#' + chartContainer.attr('id'))
          .datum(testData(attrs.series))
          .transition().duration(0)
          .call(chart);

      nv.utils.windowResize(chart.update);
      return chart;
    });

and this one:

      var chart = nv.models.lineWithFocusChart();
      var chartContainer = element.find('svg').uniqueId();
      chart.xAxis
          .tickFormat(d3.format(',f'));
      chart.yAxis
          .tickFormat(d3.format(',.2f'));
      chart.y2Axis
          .tickFormat(d3.format(',.2f'));
      d3.select('#' + chartContainer.attr('id'))
          .datum(testData(attrs.series))
          .transition().duration(0)
          .call(chart);

      nv.utils.windowResize(chart.update);

Thanks!

[liquidpele]

See the nv.render and nv.addGraph functions

https://github.com/liquidpele/nvd3/blob/development/src/core.js#L81

https://github.com/liquidpele/nvd3/blob/development/src/core.js#L111

TL;DR: It's to not block on graph generation when making multiple graphs at once.