Cómo convertir / guardar el gráfico d3.js a pdf / jpeg

Estoy trabajando en una función de cliente / javascript para guardar o convertir un gráfico D3-SVG existente en un archivo. He buscado mucho y he encontrado algunas recomendaciones, principalmente utilizando canvas.toDataURL() .

No tengo en mi página, y en su lugar uso: d3.select("body").append("svg").... También he intentado agregar SVG al pero no pasa nada .

¿Podría ayudarme a resolver esta excepción?

 Uncaught TypeError: Object # has no method 'toDataURL' 

Gracias

Para mostrar su svg dentro de un canvas, primero debe convertirlo utilizando una utilidad de procesador / procesador, como http://code.google.com/p/canvg/

(código adaptado de: Convertir SVG a imagen (JPEG, PNG, etc.) en el navegador , no probado)

 // 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"); 

Solo un aviso que convertí este concepto en una pequeña biblioteca de JavaScript: https://github.com/krunkosaurus/simg

Simplemente convierte cualquier SVG a una imagen para intercambiar o activar una descarga. Idea tomada desde aquí: http://techslides.com/save-svg-as-an-image/

Como señala @Premasagar en este comentario sobre esta pregunta, convierta SVG a imagen (JPEG, PNG, etc.) en el navegador

Si el borwser es compatible tanto con SVG como con canvas, puede utilizar esta técnica https://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/index.html

 function importSVG(sourceSVG, targetCanvas) { // https://developer.mozilla.org/en/XMLSerializer svg_xml = (new XMLSerializer()).serializeToString(sourceSVG); var ctx = targetCanvas.getContext('2d'); // this is just a JavaScript (HTML) image var img = new Image(); // http://en.wikipedia.org/wiki/SVG#Native_support // https://developer.mozilla.org/en/DOM/window.btoa img.src = "data:image/svg+xml;base64," + btoa(svg_xml); img.onload = function() { // after this, Canvas' origin-clean is DIRTY ctx.drawImage(img, 0, 0); } } 

La biblioteca Simg creada y sugerida por Mauvis Ledford arriba funcionó muy bien para permitir que se descargaran mis gráficos svg creados con Dimple.

Sin embargo, tuve que cambiar un aspecto del código para que funcione. Dentro del prototipo toString () dentro del ciclo forEach (línea 37), si cambia “svg.setAttribute (..)” a “svg [0] .setAttribute”, se aliviará que “setAttribute (..) is not una función “error”. De manera similar, lo mismo debe hacerse justo debajo en la statement de devolución, agregando “[0]” después de svg (línea 39).

También tuve que editar manualmente las asignaciones “canvas.width” y “canvas.height” (líneas 48 y 49) en el prototipo toCanvas (), para hacer que la imagen descargada tenga un tamaño más correcto (anteriormente solo estaba descargando un cuadrado estático de 300×150 en la esquina superior izquierda del gráfico).