離線/ IDE將圖形導出爲SVG或PNG圖像的方式

Question

我遇到過很多關於將d3.js支持的視覺效果導出爲圖像文件的各種方法。這些解決方案有時可能適用於我，但我有一個很大的動機去找到與此相當的離線/ IDE。在我的情況下，當我編程時沒有訪問互聯網的時候有很多時間，但是仍然可以從導出用於文檔/報告的圖形的靜態PNG中受益匪淺。

即使我將相關庫複製到本地主機，我不認爲我可以導出圖像。如果我沒有弄錯，可用的解決方案到目前爲止需要互聯網來排隊文件。這裏是我的意思是，這是從一個這樣的方法的代碼段：

function getSVGString(svgNode) { 
    svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink'); 
    var cssStyleText = getCSSStyles(svgNode); 
    appendCSS(cssStyleText, svgNode) 

    var serializer = new XMLSerializer(); 
    var svgString = serializer.serializeToString(svgNode); 
    svgString = svgString.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink=') // Fix root xlink without namespace 
    svgString = svgString.replace(/NS\d+:href/g, 'xlink:href') // Safari NS namespace fix 

另一個原因是，如果我不需要的文件，投放給用戶，我只是想有一個PNG爲我自己的用途，在我看來，有一種更簡單的方法來實現這一目標。因此，我不必經過上述例子中的精心製作的步驟。

我可能是錯的，無論哪種方式，請讓我知道你的想法。

更新：

Working example of my problem

獨立嘗試： Try #2

這一種作品，巴新下載驅動至少，但它不是正確的裁剪。大部分圖表被裁剪掉。我不知道如何解決這個問題。我也不確定是否可以指定文件類型。我想有時候也選擇下載爲'graph.svg'。

更新：

我堅持猴子看猴子的做法是讓我有所進步。我現在可以用正確的剪裁保存爲png。但是，我無法將圖形保存爲SVG。這很有趣，因爲那是它的原始格式。我想把這個問題授予某人，他可以用我上面的一個實例演示如何將圖保存爲svg。

在附註中，我在圖形的index.html中包含了一個非常冗長的blob和文件保護函數，並使用按鈕開始下載。這主要是因爲我反對，我開始變得絕望。最終，如果有一個更優雅的解決方案，並不需要那麼多的外部庫，那就太棒了。讓我也加入這個方法對於多個圖不是理想的。我現在必須將所有函數的按鈕添加到每個有我想要轉換的圖的index.html。我不是電腦，我不能夠快速迭代。

Answer 1

我在這裏看到的步驟是：

1. 找到一種方法，採取什麼樣的已被D3.js創建。這可能是SVG格式的矢量文件。
2. 使用命令行工具（離線）將SVG文件轉換爲光柵圖像（即jpg，png）...

對於第一步驟：

• How do I save/export an SVG file after creating an SVG with D3.js (IE, safari and chrome)?

對於第二步驟：

• How to convert a SVG to a PNG with Image Magick?
• imagemagick
• inkscape

其他發現：

• Export SVG D3 visualization to PNG or JPEG
• Saving Browser-based SVGs as Images