gráficos d3.js 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

Existen métodos más complicados, pero una forma 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 al http://jsfiddle.net/plaliberte/HAXyd/.

Answer 2

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

Como no hay un archivo real de descarga, lo que tiene que hacer es codificar la cadena de SVG como una técnica de uri, todo lo que tiene 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 dar salida al código SVG a un cuadro de alerta:

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

y copiar la alerta en un archivo de texto y guardar 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 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 usted es feliz para guardar una imagen de trama de alta resolución a, he encontrado la mejor solución es utilizar creciente de la perla Página 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) que obtendría con una captura de pantalla simple.

Si necesita los vectores, y cargando el SVG en Illustrator no está funcionando para usted, usted podría intentar la representación de una res Super Hi png, a continuación, utilizando seguimiento en vivo del fotógrafo ...