NVD3 - odd ticks when updating data

Question

When I update data in an existing NVD3 chart, ticks along the x axis do not appear at fixed intervals.

I am creating a multiBarChart with data retrieved from d3.json() . The data are hits in a date range. I have a separate date range selection that updates the chart data.

I have the following to create a graph (simplified):

 initGraph = function(url) { d3.json(url, function(data) { nv.addGraph(function() { chart = nv.models.multiBarChart(); d3.select('#chart svg').datum(data).transition().duration(500).call(chart); nv.utils.windowResize(chart.update); return chart; }); }); }; 

And the following function to update it, which is called in the date picker:

 redrawGraph = function(url) { d3.json(url, function(data) { d3.select('#chart svg').datum(data).transition().duration(500).call(chart); nv.utils.windowResize(chart.update); }); }; 

Everything seems fine, but sometimes the tick interval ends in inconsistent:

This only happens when updating an existing chart.

I spent quite a bit of time validating the data - that the x values ​​increase by fixed values ​​- so I can only think that I am missing something when redrawing the chart.

Answer 1

A bit late, but you need to call chart.update() instead of registering a new window listener so that the code becomes:

 redrawGraph = function(url) { d3.json(url, function(data) { d3.select('#chart svg').datum(data).transition().duration(500).call(chart); chart.update(); }); }; 

Basically, every time you update a chart in nvd3, you need to call chart.update to redraw it.

Note that nv.utils.windowResize(chart.update) equivalent

 // Register an event listener on windowResize nv.utils.windowResize(function() { // Every time the window is resized, redraw the chart chart.update(); }); 

Thus, with each update there may not be a good effect.

Answer 2

I worked on the problem by cloning the recreation of the graph when the date range is selected:

 $("#chart svg").empty(); 

The results are not as aesthetic as you might expect.