我一直在寻找一种从 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 的一部分。
提前致谢!
最佳答案
好的,我已经决定只允许指定一个按钮(带有 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);
}
不是我最初的想法,但对我有用。
关于javascript - d3.js 将图形下载为 svg 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24079566/