html - examples - jquery d3

Los gráficos d3.js se imprimen en archivos de calidad de impresión de alta resolución.

Question

¿Hay alguna manera de generar gráficos, tablas, mapas, etc. creados en html / js basados ​​en d3.js en otro formato de datos con calidad de impresión de publicación de alta resolución?

Los gráficos de estas tablas son fantásticos, pero serían inútiles cuando se imprimen en papel y se pixelan altamente. Estoy tratando de evitar volver a dibujarlos en Illustrator para vectores o photoshop.

Los formatos de salida que estoy buscando deben poder leerse en Illustrator o Photoshop. Y lo más preferible sin mucha manipulación visual necesaria una vez que se exporta. Sería realmente contrario al objetivo si tuviera que volver a copiar o rellenar el color o volver a hacerlo para obtener el efecto.

¡Gracias!

Answer 1

Hay métodos más complicados, pero una manera rápida y sencilla es simplemente copiar el elemento svg del DOM (puede que necesite incluir también sus archivos css), pegarlo en un archivo y guardarlo con la extensión .svg. Después de eso, puedes abrirlo en un editor vectorial.

También hay formas de convertir la salida d3.js a un archivo png también. Alguien armó una jsfiddle de hacer esto con canvg en http://jsfiddle.net/plaliberte/HAXyd/ .

Answer 2

Los navegadores modernos admiten el atributo de download en los enlaces. Si crea un enlace a una imagen con el atributo de download , el navegador lo descargará en lugar de abrirlo dentro del navegador.

Como no hay un archivo real para descargar, lo que tienes que hacer es codificar tu cadena svg como un uri de datos. Todo lo que tienes que hacer es ...

var download = d3.select("body").append("a").attr("href", "#")

download.on("click", function(){
      d3.select(this)
        .attr("href", ''data:application/octet-stream;base64,'' + btoa(d3.select("#viz").html()))
        .attr("download", "viz.svg") 
    })

Puede ver una demostración aquí http://bl.ocks.org/3831266 Puede abrir el archivo descargado en Illustrator sin ningún problema.

Sin embargo, hay un par de trampas: debe declarar sus estilos en línea (no puede aplicar estilos con una hoja de estilo CSS externa).

Una solución rápida y sucia es enviar el código svg a un cuadro de alerta:

download.on("click", function(){
  alert(d3.select("#viz").html())
});

Y copie la alerta en un archivo de texto y guárdelo como svg.

Answer 3

Para mi gráfica d3, las soluciones propuestas no funcionan bien. Algunas de las propiedades del SVG de exportación resultante (para expandir los degradados) no se representan correctamente y se ven muy diferentes de lo que muestra Chrome.

En mi caso, la imagen era estática, por lo que una captura de pantalla podría haber sido suficiente. Sin embargo, una captura de pantalla está limitada al tamaño del monitor en el que está trabajando. Sin embargo, estoy contento de haber encontrado una solución alternativa, webkit2png: http://www.paulhammond.org/webkit2png/

Esta herramienta permite crear capturas de pantalla de sitios web a medida que se ven en una pantalla de tamaño arbitrario. Es perfecto para convertir gráficos d3 estáticos. Espero que pueda ayudar a alguien ya que me ayudó.

Answer 4

Si está feliz de guardar en una imagen ráster de alta resolución, he encontrado que la mejor solución es usar Pearl Crescent Page Saver, un complemento de Firefox:

https://addons.mozilla.org/en-US/firefox/addon/pagesaver/

La versión básica le da la opción de escalar la imagen, por ejemplo, escalar al 200% aumentará la resolución de .png al doble (4x tantos píxeles) de lo que obtendría con una captura de pantalla simple.

Si necesita los vectores, y cargar el svg en Illustrator no funciona para usted, puede intentar renderizarlo a un súper hi res png, luego usando Live Trace de Illustrator ...