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