NVD3 - uneven ticks when updating data

Question

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

I'm creating a multiBarChart with data sourced from d3.json(). The data represents hits over a date range. I have a separate date range picker which updates the chart's data.

I have the following to create the 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 invoked 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, however occasionally the tick spacing ends up inconsistent:

This only occurs when updating an existing chart.

I've spent quite some time verifying that the data is correct - that the x values are incrementing by fixed values - so I can only think that I'm missing something when redrawing the chart.

Befitting

Sample data I'm using as input is here: [{"key":"New Zealand","values":[{"y":1,"x":1354665600000},{"y":2,"x":1354752000000},{"y":3,"x":1354838400000},{"y":0,"x":1354924800000},{"y":0,"x":1355011200000},{"y":0,"x":1355097600000},{"y":0,"x":1355184000000}, ... ]}] – Befitting

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 everytime you update a chart in nvd3, you need to call chart.updateto redraw it.

Note that nv.utils.windowResize(chart.update) is an equivalent to

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

So doing that on every update cannot have good effects.

Matter

Answer 2

I have worked around the issue by kludgily recreating the graph when a date range is selected:

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

The results aren't as aesthetically awful as one may expect.

Befitting