vitamin tutorial examples ejemplos d3js svg d3.js pdf-generation

svg - tutorial - d3js charts examples



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

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 <canvas> en mi página, y en su lugar uso: d3.select("body").append("svg").... También he intentado agregar SVG al <canvas> pero no pasa nada .

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

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

Gracias

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 lienzo, 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 declaración 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 300x150 en la esquina superior izquierda del gráfico).

Para mostrar su svg dentro de un lienzo, 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");