javascript - How to change transition duration globally in NVD3? - Stack Overflow

admin管理员组

文章数量:1291217

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

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

• javascript
• d3.js
• phantomjs
• nvd3.js

Share Improve this question Follow asked Mar 23, 2014 at 11:07 jkondratowiczjkondratowicz 1,3011515 silver badges2121 bronze badges 2

• 1 I'm afraid you'd have to modify the NVD3 source code to take out the transitions. – Lars Kotthoff Commented Mar 23, 2014 at 13:42
• Too bad, I hoped at least D3 itself would provide some kind of a way to disable animations... – jkondratowicz Commented Mar 26, 2014 at 13:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

As of NVD3 1.7.1 you can use the duration option:

chart.duration(0);

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.

本文标签： javascriptHow to change transition duration globally in NVD3Stack Overflow