javascript - 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);

            } 

不是我最初的想法，但对我有用。