d3.js圖形輸出到高分辨率打印質量文件？

有沒有辦法將基於d3.js的html/js中創建的圖表，圖表，地圖等轉換爲其他數據格式並且出版品質量高分辨率？d3.js圖形輸出到高分辨率打印質量文件？

這些圖表的圖形是太棒了，但打印在紙上，並得到了高度像素化的時候將是無用的。我試圖避免在Illustrator中爲載體或Photoshop重新繪製它們。

我在找的輸出格式應該對Illustrator或Photoshop可讀。最優選的是，一旦輸出就不需要更多的視覺操作。如果我不得不重新制作或重新填充顏色或重新使用Photoshop來獲得效果，那麼它的確會失敗。

謝謝！

來源

2012-10-04 user1518600

有更復雜的方法，但一個快速，簡單的方法是從DOM複製svg元素（您可能還需要包含您的css文件），將其粘貼到一個文件中並將其與擴展名一起保存。 SVG。之後，你可以在矢量編輯器中打開它。

也有辦法的d3.js輸出轉換爲png文件中。有人用canvg在http://jsfiddle.net/plaliberte/HAXyd/這樣做了這樣一個jsfiddle。

來源

2012-10-04 02:29:26 Bill

謝謝你的建議，但我不知道你的意思。是否有更多的例子來演示如何做每一步？ – user1518600

我認爲Bill意味着您可以打開Developer Tools或Firebug，在代碼檢查器中選擇svg，將其複製並粘貼到文件中。 – Duopixel

這似乎幾乎爲我工作。但是當我這樣做時，它會切斷或切斷我的一些文字。任何想法爲什麼？ – btm1

現代瀏覽器都支持上的鏈接download屬性。如果您創建指向download屬性的圖片鏈接，則瀏覽器將下載它，而不是在瀏覽器中打開它。

由於沒有實際的文件下載，你所要做的就是編碼您的SVG字符串作爲數據-URI，所有你需要做的是...

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

你可以看到一個演示這裏http://bl.ocks.org/3831266你可以在illustrator中打開下載的文件沒有任何問題。

但是有幾個問題：你必須聲明你的樣式內聯（你不能使用外部CSS樣式表樣式）。

一個快速和骯髒的解決辦法是輸出的SVG代碼，一個警告框：

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

以及警報復制到一個文本文件，並保存爲SVG。

來源

2012-10-04 03:28:09 Duopixel

這真的很好！我從你的解決方案中搜集了attr（「xmlns」，「http://www.w3.org/2000/svg」），以便圖像能夠正確加載。沒有這個我收到了一個XML錯誤。 –

對於我的d3圖表，所提出的解決方案效果不佳。結果導出的SVG的某些屬性（用於示例梯度）未正確呈現，並且與Chrome顯示的內容看起來非常不同。

在我的情況下，圖像是靜態的，所以截圖可能已經足夠。但是，屏幕截圖僅限於您正在使用的顯示器的大小。然而，我很高興我找到了一個替代解決方案，webkit2png： http://www.paulhammond.org/webkit2png/

這個工具允許創建網站的屏幕截圖，因爲他們看起來在任意大小的屏幕上。它非常適合轉換靜態d3圖。我希望它能幫助別人，因爲它幫助了我。

來源

2013-03-03 11:26:00 themiurgo

如果你很高興保存到高分辨率光柵圖像，我已經找到了最好的解決方案是使用珍珠坊頁節電器，一個Firefox插件：

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

基本版本給你縮放圖像的選項 - 例如縮放到200％會使.png的分辨率提高一倍（4倍的像素數），您可以通過簡單的屏幕截圖獲得分辨率。

如果您需要的載體和裝載在Illustrator中的SVG是不工作適合你，你可以嘗試渲染超高分辨率PNG，然後使用Illustrator的實時描摹......

來源

2014-01-26 14:53:18 RobinL

d3.js圖形輸出到高分辨率打印質量文件？

回答

相關問題