如何转换/保存d3.js图形为pdf / jpeg [英] How to convert/save d3.js graph to pdf/jpeg

问题描述

我正在使用客户端/ javascript函数来保存或将现有的D3-SVG图形转换为文件。
我搜索了很多，并发现了一些建议，主要使用 canvas.toDataURL（）。

我在我的页面中没有< canvas> ，而是使用： d3.select（body）append（svg） ....
我也试图将SVG附加到< canvas> ，但什么也没有发生。

请帮助我解决此异常：

 未捕获TypeError：Object ＃< SVGSVGElement>没有方法'toDataURL'
  

谢谢

http://code.google.com/p/canvg/

（代码改为：将SVG转换为图片（JPEG，PNG等）浏览器，未测试）

  // canvg调用svg xml并将其转换为canvas 
 canvg（'canvas'，$（＃my-svg）。html（））; 
 
 //画布调用以输出png 
 var canvas = document.getElementById（canvas）; 
 var img = canvas.toDataURL（image / png）; 
  

I'm working on a client-side/javascript function to save or convert an existing D3-SVG graph into a file. I've searched a lot and found some recommendations, mainly using canvas.toDataURL().

I have no <canvas> in my page, and instead using:d3.select("body").append("svg").... I've also tried to append the SVG to the <canvas> but nothing happens.

Could you please help me to resolve this exception:

Uncaught TypeError: Object #<SVGSVGElement> has no method 'toDataURL' 

Thank you

解决方案

To display your svg within a canvas, you first have to convert it using a parser/renderer utility such as http://code.google.com/p/canvg/

(code adapted from: Convert SVG to image (JPEG, PNG, etc.) in the browser, not tested)

// the canvg call that takes the svg xml and converts it to a canvas
canvg('canvas', $("#my-svg").html());

// the canvas calls to output a png
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");

这篇关于如何转换/保存d3.js图形为pdf / jpeg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！