How to remove NVD3 chart resize/update delay

Question

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

Pacifa

Answer 1

As of NVD3 1.7.1 you can use the duration option:

chart.duration(0);

Slink

Thanks for the heads up. I updated the fiddle and it appears to work. The resizing is broken, but clicking on the stacked/grouped and stream selections makes it draw instantly instead of animating through. jsfiddle.net/a5Fnj/12 – Pacifa

Followup: That fiddle is using 1.7.0 because the CDN doesn't have 1.7.1 – Pacifa

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

Finsen

I've tried that and couple different variations of passing in -1. Resizing the jQuery container continues to cause a slow repaint. Here's an updated fiddle: jsfiddle.net/a5Fnj/10 – Pacifa

I should have been more specific in my answer. I had a problem with the re-draw when appending data to the chart, not re-sizing. I thought it worth checking if it solved your problem as well, but it seems you already gone down that road with no luck. – Finsen

This is probably not the solution you are after, but have you tried delaying the update until the re-size is done? Like this: jsfiddle.net/qL5vyr39 – Finsen

That's a good idea. While it's an improvement in some ways, it's still not a great user experience. It might be useful combined with other approaches. Really wish that the NVD3 team would respect the duration() call. – Pacifa

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

Emprise

I grabbed the latest nv.d3.min.js from your link and added chart.transitionDuration(0) directly after the chart.yAxis call. Resizes continue to render with a delay. – Pacifa

Right, it looks like that only controls part of the transitions. The rest is hard-coded I'm afraid so you'll have to modify the source. – Emprise

I'm having the same problem. I'd be pretty okay with hacking the source - If I could just find the appropiate line(s) that need to be changed. @LarsKotthoff Could you give a hint? I don't want to start replacing all .transition( calls with transition(1) until it works :-/ – Tungstate

You would have to do that I'm afraid. – Emprise

Hm did this now but didn't change the behaviour - I'll invest a bit time to find the according timer/timeout function. Thanks anyway! – Tungstate