如何清除NVD3图表调整大小/更新延迟 [英] How to remove NVD3 chart resize/update delay

问题描述

我创建了一个NVD3 multiBarChart并将其放在一个jQuery可调整大小的容器中。调整图表大小时，每个渲染都会产生与首次绘制图表时相同的延迟：从左到右错开的延迟绘制条形图。这看起来很酷，当图表第一次绘制，但是调整图表的大小时是一个麻烦。我试验了nv.d3.css，减少每一个延迟到0ms无效。尚未检查NVD3 JS，并希望不需要。

I've created an NVD3 multiBarChart and placed it in a jQuery resizable container. When resizing the chart, each render incurs the same delay as when the chart is first drawn: staggered left-to-right delayed drawing of the bars. This looks cool when the chart is first drawn, but it's a nuisance when resizing the chart. I've experimented with nv.d3.css, reducing every delay to 0ms to no avail. Haven't yet inspected the NVD3 JS and am hoping not to need to.

小提琴：
http://jsfiddle.net/a5Fnj/10/

var container = $("#mycontainer");
$(container[0]).resizable();
var svg = d3.select(container[0]).append("svg");

nv.addGraph(function () {
    var chart = nv.models.multiBarChart();

    chart.xAxis.tickFormat(d3.format(',f'));
    chart.yAxis.tickFormat(d3.format(',.1f'));

    d3.select(container[0]).select("svg")
        .datum(exampleData())
        .transition().duration(0).call(chart);

    nv.utils.windowResize(chart.update);

    this.stackedbar = chart;
});

function exampleData() {
    return stream_layers(3, 10 + Math.random() * 100, .1).map(function (data, i) {
        return {
            key: 'Stream' + i,
            values: data
        };
    });
}

推荐答案

您可以使用持续时间选项：

As of NVD3 1.7.1 you can use the duration option:

chart.duration(0);

这篇关于如何清除NVD3图表调整大小/更新延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！