How to remove NVD3 chart resize/update delay

问题:

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.

Fiddle: 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
        };
    });
}

回答1:

As of NVD3 1.7.1 you can use the duration option:

chart.duration(0);

回答2:

I used transitionDuration: -1 that worked for a stackedAreaChart.

Edit

This helped remove the transition when appending chart data, not the re-size issue, please check the comments below.

回答3:

In the latest version (from github), you can set .transitionDuration():

chart.transitionDuration(0);

Edit: Even with this, some of the transitions/durations are hardcoded in the NVD3 source. The only way to get rid of those is to modify the source.