NVD3 - uneven ticks when updating data

问题

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.

回答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.

回答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.

来源：https://stackoverflow.com/questions/14543660/nvd3-uneven-ticks-when-updating-data

标签

d3.js

nvd3.js