How to remove NVD3 chart resize / update delay

Question

I created an NVIDIA multiBarChart and placed it in jQuery resizable container. When changing the size of the chart, each render takes the same delay as the first time the chart was drawn: step-by-step delayed drawing of strips from left to right. This looks great when the chart is first drawn, but it is a nuisance when resizing the chart. I experimented with nv.d3.css, reducing each delay to 0 ms to no avail. We haven't tested the NVD3 JS yet and hope you don't need it.

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

Answer 1

As with NVD3 1.7.1, you can use the duration parameter:

 chart.duration(0); 

Answer 2

I used transitionDuration: -1, which worked for stackedAreaChart.

Edit

This helped to remove the transition when adding the chart data, and not the problem of resizing, please read the comments below.

Answer 3

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

 chart.transitionDuration(0); 

Edit: even so, some of the transitions / durations are hard-coded in the NVD3 source. The only way to get rid of them is to change the source.