Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change transition duration globally in NVD3?

I want to turn NVD3 charts into PDF documents. Those charts are normally displayed in browser (I can't make a separate instance of each chart for print and for display), I got it all working using PhantomJS, but I have a problem that I can't seem to find a good solution to.

All NVD3 models use transitions, but only some of those transitions are affected by transitionDuration option. Because of those transitions, I now have to use a timeout before "capturing" the screen in PhantomJS to make a PDF, otherwise resulting document pictures those charts mid-transition. Obviously I'd rather not have to wait.

PhantomJS uses print media type to render PDFs, so it's very easy to disable any CSS3 animations (using media query), but I can't find any way of turning D3 transitions off (in other words - forcing a default transition duration of 0). I can detect print media type in JavaScript, but can't find a good way of globally turning off animations in D3/NVD3... That's all I've got and it doesn't really do much:

var chart = nv.models.multiBarChart()
    .tooltipContent(tooltip)
    .stacked(true)
    .showControls(false);

var duration = 1000; // default duration
if(window.matchMedia) {
    if(window.matchMedia('print').matches) {
        duration = 1; // duration for print 
    }
}

chart.transitionDuration(duration);
like image 216
jkondratowicz Avatar asked Dec 16 '22 00:12

jkondratowicz


2 Answers

As of NVD3 1.7.1 you can use the duration option:

chart.duration(0);
like image 200
jheminghous Avatar answered Dec 17 '22 13:12

jheminghous


I cannot think of another solution than modify the nvd3 source. If you replace all the ocurrences of

    transitionDuration = 250

for

    transitionDuration = 0

in nv.d3.js it should work.

like image 42
fasouto Avatar answered Dec 17 '22 14:12

fasouto