d3.js下載圖為svg圖像

Question

我一直在尋找從d3.js下載生成的svg的方法，我最終得到了phantom.js，這看起來有點矯枉過正（或者至少令人生畏，因為問題的“簡單性”）或者svg-crowbar.js這顯然只適用於chrome（我需要firefox）。

我還發現了以下代碼：

//Encode the SVG
var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(d3.select('svg').node());
var imgData = 'data:image/svg+xml;base64,' + btoa(xmlString);
//Use the download attribute (or a shim) to provide a link
<a href="'+imgData+'" download="download">Download</a>

在https://groups.google.com/forum/#!topic/d3-js/RnORDkLeS-Q

哪個應該下載svg（如果我可以讓它工作）。 我在想，而不是提供下載按鈕，單擊某個svg-element也應該這樣做？ 我目前有以下代碼，但它不起作用：

 var svg = d3.select(elementid).append("svg")
                        .attr("width", 500)
                        .attr("height", 500)
                        .append("g")

            var serializer = new XMLSerializer();
            var xmlString = serializer.serializeToString(d3.select('svg').node());
            var imgData = 'data:image/svg+xml;base64,' + btoa(xmlString);
            //Use the download attribute (or a shim) to provide a link

                    svg.append("rect")
                            .attr("x", 20)
                            .attr("y", 20)
                            .attr("width", 130)
                            .attr("height", 160)
                            .attr("fill", "red")
                            .attr("id", "rectLabel")
                            .attr('xlink:href',imgData);

svg只繪制矩形應允許您在按下矩形時將svg（帶矩形）下載為.svg文件。 我不知道我是否在正確的軌道上。

我是d3.js的新手，但基本上我正在為Firefox中的客戶端d3.js svg下載尋找可能的修復/替代方案。 我最好將下載“按鈕”作為svg的一部分。

提前致謝！

Answer 1

好吧，我已經決定只允許指定按鈕（帶有downloadID）並在創建svg后在代碼中添加了這個。

            if (p.graph.svg.downloadID != undefined){
                var serializer = new XMLSerializer();
                var xmlString = serializer.serializeToString(d3.select('svg').node());
                var imgData = 'data:image/svg+xml;base64,' + btoa(xmlString);

                function writeDownloadLink(){
                    var html = d3.select(elementid).select("svg")
                            .attr("title", "svg_title")
                            .attr("version", 1.1)
                            .attr("xmlns", "http://www.w3.org/2000/svg")
                            .node().parentNode.innerHTML;  

                    d3.select(this)
                            .attr("href-lang", "image/svg+xml")
                            .attr("href", "data:image/svg+xml;base64,\n" + btoa(unescape(encodeURIComponent(html))))
                };

                var idselector = "#"+p.graph.svg.downloadID;

                d3.select(idselector)
                        .on("mouseover", writeDownloadLink);

            } 

不是我一開始的想法，但對我有用。

Answer 2

我已經將svg-crowbar腳本修改為一個名為downloadSVG()的函數，可以在腳本中調用它。 該功能在網頁上下載SVG。 該功能可在以下網址找到： https ： //bitbucket.org/mas29/public_resources/raw/b9bafa002053b4609bd5186010d19e959cba33d4/scripts/js/svg_download/downloadSVG.js 。

假設您有一個按鈕，當按下該按鈕時，應該下載SVG。 只需將downloadSVG（）作為“click”功能的一部分，就像這樣：

d3.select("body").append("button")
        .attr("type","button")
        .attr("class", "downloadButton")
        .text("Download SVG")
        .on("click", function() {
            // download the svg
            downloadSVG();
        });

Answer 3

我發現這個塊有最好的解決方案。

• 標記：

   <a id="download" href="#">Download SVG</button> 

• javasript：

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