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 元素也应该这样做？我目前有以下代码，但它不起作用：

 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() 添加为“点击”功能的一部分，如下所示：

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 有最好的解决方案。

• 标记：

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