How to change the duration of the transition worldwide in NVD3?

I want to turn NVD3 graphics into PDF documents. These charts are usually displayed in a browser (I can’t make a separate copy of each chart for printing and display), I have all worked with PhantomJS, but I have a problem that I can’t find a good solution to.

All NVD3 models use transitions, but only some of these transitions are optional transitionDuration. Because of these transitions, I now need to use a timeout before “capturing” the screen in PhantomJS to make a PDF file, otherwise the result will be an image of these cards in the middle of the transition. Obviously, I would rather not wait.

PhantomJS uses the format printfor rendering PDF files, so it’s very easy to turn off any CSS3 animations (using a media query), but I can’t find a way to turn off D3 transitions (in other words, forcing the default transition duration to 0). I can detect the type of media printin JavaScript, but I can’t find a good way to globally disable animation in D3 / NVD3 ... That's all I have, and actually it’s not so 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);
+4
source share
2 answers

I cannot think of a solution other than changing the nvd3 source. If you replace all the pieces

    transitionDuration = 250

for

    transitionDuration = 0

in nv.d3.js it should work.

+3
source

NVD3 1.7.1, :

chart.duration(0);
+9

Source: https://habr.com/ru/post/1533046/


All Articles