NVD3 - 更新数据时不均匀的记号 [英] NVD3 - uneven ticks when updating data

问题描述

当我更新现有NVD3图表中的数据时，沿x轴的刻度不是以固定的间隔呈现。

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

我创建了一个 multiBarChart ，数据源自 d3.json（）。数据表示日期范围内的匹配。我有一个单独的日期范围选择器更新图表的数据。

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.

我花了很多时间来验证数据是否正确 - x值是按固定值递增的 - 所以我只能认为我在重绘图表时遗漏了一些东西。

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.

推荐答案

稍晚，但您需要调用 chart.update c>代替注册新的窗口侦听器，以便代码变为：

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();
  });
};

基本上每次更新nvd3中的图表时，需要调用图表。更新以重绘它。

Basically everytime you update a chart in nvd3, you need to call chart.updateto redraw it.

请注意 nv.utils.windowResize（chart.update）

// 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.

这篇关于NVD3 - 更新数据时不均匀的记号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！