D3.js下载图形为SVG图像

d3.js download graph as svg image

本文关键字：SVG 图像 图形 js 下载 D3      更新时间：2023-09-26

我一直在寻找一种从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/

!主题/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，但基本上我正在寻找一个可能的修复/替代客户端d3.js svg下载在Firefox。最好是将下载"按钮"作为svg的一部分。

提前感谢!

好了，我已经解决了只允许一个按钮的规格(与downloaddid)，并在创建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);
            }

不是我一开始想到的，但对我有用。

我已经将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();
        });

我发现这个块有最好的解决方案。

  • 标记:

    <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") 
})
相关文章：