将d3.js图形下载为SVG图像

Question

将d3.js图形下载为SVG图像

5

我一直在寻找一种方法来下载由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);

< p >SVG只绘制矩形，当单击矩形时，应允许您将SVG（包括矩形）下载为 .svg 文件。我不知道这样做是否正确。

我非常新于 d3.js，但基本上我正在寻找 Firefox 中客户端 d3.js SVG 下载的可能修复/替代方法。最好将下载“按钮”作为 SVG 的一部分。

提前致谢！

- Sleenee

3个回答

2

我发现这个代码块提供了最好的解决方案。

Markup:

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

- Alex Lenail

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();
        });

- maia

如果您想要下载一个具有特定类名的单个SVG，请使用以下链接：https://bitbucket.org/mas29/public_resources/raw/52d9a5439ab928e18d942ce52ed5016388f9bdb6/scripts/js/svg_download/downloadSVGByClass.js。调用downloadSVG(myClassName)函数。 - maia

在 Chrome 64+ 中失败，我认为。 - Alex Lenail

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sleenee · Accepted Answer

好的，我已经确定只允许指定一个带有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);

            }

虽然不是我最初想要的，但对我来说可行。