Question

我一直在寻找从d3.js下载生成的svg的方法，我最终得到了phantom.js，这看起来有点矫枉过正（或者至少令人生畏，因为＆＃34;简单＆＃34;问题）或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>

on 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下载寻找可能的修复/替代方案。我最好有下载＆＃34;按钮＆＃34;作为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（）作为“点击”功能的一部分，就像这样：

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

Answer 3

我发现this block有最佳解决方案。

标记：
```
assoc .bat=batfile
```

javasript：

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

d3.js下载图为svg图像

3 个答案: