d3.js stampa l'output in file di qualità di stampa ad alta risoluzione?

Question

Esiste un modo per generare grafici, grafici, mappe, ecc. Creati in html/js basati su d3.js in altri formati di dati con alta qualità di stampa di stampa ad alta risoluzione?

La grafica di questi grafici è fantastica, ma sarebbe inutile se stampata su carta e altamente pixelata. Sto cercando di evitare di sostituirli in Illustrator per i vettori o Photoshop.

I formati di output che sto cercando dovrebbero essere leggibili con Illustrator o Photoshop. E più preferibilmente senza una maggiore manipolazione visiva necessaria una volta esportato. Sarebbe davvero sconfiggere lo scopo se dovessi sostituire o riempire il colore o reinserirlo per ottenere l'effetto.

Grazie!

Answer 1

Ci sono metodi più complicati ma un modo semplice e veloce è copiare l'elemento svg dal DOM (potrebbe essere necessario includere anche i file css), incollarlo in un file e salvarlo con l'estensione. svg. Dopodiché puoi aprirlo in un editor di vettori.

Esistono anche modi per convertire l'output d3.js in un file png. Qualcuno ha messo insieme un jsfiddle per farlo con canvg allo http://jsfiddle.net/plaliberte/HAXyd/.

Answer 2

I moderni browser supportano l'attributo download sui collegamenti. Se si crea un collegamento a un'immagine con l'attributo download, il browser lo scaricherà invece di aprirlo all'interno del browser.

In mancanza di un file vero e proprio per il download, che cosa dovete fare è quello di codificare la stringa SVG come un data-URI, Tutto quello che dovete fare è ...

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

Si può vedere una demo qui http://bl.ocks.org/3831266 è possibile aprire il file scaricato in Illustrator senza problemi.

Esistono tuttavia un paio di trucchi: è necessario dichiarare gli stili in linea (non è possibile utilizzare lo stile con un foglio di stile CSS esterno).

Una soluzione rapida e sporca è quello in uscita il codice SVG ad una finestra di avviso:

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

e copiare l'avviso in un file di testo e salvare come SVG.

Answer 3

Per il mio grafico D3 le soluzioni proposte non funzionano bene. Alcune delle proprietà del file SVG di esportazione risultante (per esempio i gradienti) non vengono visualizzate correttamente e hanno un aspetto molto diverso da quello che mostra Chrome.

Nel mio caso l'immagine era statica, quindi uno screenshot avrebbe potuto essere sufficiente. Tuttavia, uno screenshot è limitato alle dimensioni del monitor su cui stai lavorando. Tuttavia, sono felice di aver trovato una soluzione alternativa, webkit2png: http://www.paulhammond.org/webkit2png/

Questo strumento consente di creare schermate di siti Web mentre guardano uno schermo di dimensioni arbitrarie. È perfetto per la conversione di grafici statici d3. Spero che possa aiutare qualcuno come mi ha aiutato.

Answer 4

Se sei felice di salvare in un'immagine ad alta risoluzione raster, ho trovato la soluzione migliore è quella di utilizzare Pearl Crescent Pagina Saver, un addon per Firefox:

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

La versione base si dà l'opzione per ridimensionare l'immagine, ad es il ridimensionamento al 200% aumenterà la risoluzione del file .png per raddoppiare (4x come tanti pixel) ciò che otterresti con un semplice screenshot.

se avete bisogno i vettori, e caricando lo SVG in Illustrator non funziona per voi, si potrebbe provare il rendering di una res Super Hi png, quindi utilizzando Live Trace di Illustrator ...