svg - tutorial - d3js charts examples

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

Question

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

Answer 1

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);
    }
}

Answer 2

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).

Answer 3

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

Answer 4

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/