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;
if(window.matchMedia) {
if(window.matchMedia('print').matches) {
duration = 1;
}
}
chart.transitionDuration(duration);
source
share