Angular-nvd3 issue, failed to update chart when set data to newData

Question

It is a strange issue not only about nvd3 directive, I have steped into the directive source code, but still not find the reason.
I put it in plunker, switch comment line 34 and 35 in app.js will show the issue.
if I set a new value in $scope.data, the chart works well, but if I set a newData, the chart will not work.
I've debug the angular-nvd3 directive, when I change the whole data object, the $watch('data') (angular-nvd3.js line 320) still work, but the scope.chart.update() not working correct. I didn't found anywhere that nvd3.js hold the chart data, so I really don't know what happend, why not working....

Any comment will be a preciate!

Answer 1

I believe this is a quirk of how nvd3 is using d3 data-binding.

The initial data array is bound to the DOM like a standard d3 visualization and holds a reference to it. When you modify the array in the directive, it triggers a redraw and since it's the same array (reference to it), the bound data is changed and the plot redraws normally.

When you change the array after the first draw, under the hood, the array that still data-binded is the initial array (the one with no data). The directive still triggers a re-draw but with no data.

To do what you want, instead of calling $scope.$apply(); get api into the $scope with:

<nvd3 options="options" data="data" api="api" config="{refreshDataOnly: true}"> </nvd3>

and then use:

$scope.api.updateWithData($scope.data);

Updated example.

Answer 2

Since the version 1.0.2 you might also want to set deepWatchData as true. There was a commit on 15/09/2015 and now this option by default is false which means that Angular's watch expression will not track changes in array with data.

No need in doing scope.api.refresh() with this settings. No need in rewriting of the whole array of data, with new portion of data you just add/push it to array. This will help to prevent flashing when reassigning new data.

Now instead of: <nvd3 options="options" data="data" class="with-3d-shadow with-transitions" config="{refreshDataOnly: true}"></nvd3>

should be: <nvd3 options="options" data="data" class="with-3d-shadow with-transitions" config="{refreshDataOnly: true, deepWatchData: true}"></nvd3>