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);
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With