CODEWITHSUNDEEP
htmlsvgd3.jsscreenshot
nbonneel
nbonneel

Reputation: 3326

D3 screenshot to PDF

We have done a visualization, mostly in D3 and we would like to generate a nice pdf of it to benefit from vector rendering rather than doing a mere screenshot. It can be seen at:

http://www.bonneel.com/prot/prot2/

I also saw Sergiy's tutorial on producing pdfs out of D3 visualizations. However, his technique works if there is a single svg element (and I didn't manage to extend it to the multiple views we have), and actually produces a strange output in our case

See below for a screenshot of what it produces : the grey background is outside of the clipping area, and is just shown to illustrate that in addition to the view being incorrectly black (and doesn't show the entire visualization), it also extends outside of the clipping area with strange artifacts.

Screenshot

I understand that some elements might not be possibly converted to vector graphics (e.g., the 3D view), but having a screenshot that is mostly vector graphics would be nice (e.g., all the div elements that contain SVG shall be represented in vector format, and only the 3D view rasterized).

Any idea ?

Upvotes: 2

Views: 444

Answers (1)

bbill
bbill

Reputation: 2304

Hopefully the SVG Crowbar can help you. I've used it before and it picks up most of the styles, though you have to read the warnings at the bottom.

Once you have your SVG image (with styles!) you should be able to open in Fireworks or Illustrator and export to vector PDF.

Upvotes: 1

Related Questions