d3.js下载图形作为svg图像 [英] d3.js download graph as svg image

问题描述

我一直在寻找一种方法来从d3.js下载生成的svg，而且我最终得到的似乎有些矫枉过正（或者至少是因为问题的简单性而吓倒）或者svg- crowbar.js这显然只是铬（我需要Firefox）。

我也发现了以下代码：

  //编码SVG 
 var serializer = new XMLSerializer（）; 
 var xmlString = serializer.serializeToString（d3.select（'svg'）。node（））; 
 var imgData ='data：image / svg + xml; base64，'+ btoa（xmlString）; 
 //使用下载属性（或垫片）提供链接
< a href ='+ imgData +'download =download>下载< / a> 
  

在 https://groups.google.com/forum/#!topic/d3-js/RnORDkLeS-Q

哪个应该下载svg（如果我能得到它的工作）。我在想，不是提供一个下载按钮，点击一个特定的SVG元素也应该这样做？我现在有下面的代码，但它不起作用：

$ $ p $ 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）;
//使用下载属性（或垫片）提供链接

svg.append（rect）
.attr（x，20）
$ b .attr（width，130）
.attr（height，160）
.attr（fill，red ）
.attr（id，rectLabel）
.attr（'xlink：href'，imgData）;

svg只能绘制矩形，应该允许你下载svg（用矩形）作为。 svg文件时矩形被按下。我不知道我是否在正确的轨道上。

我对d3.js很新，但基本上我正在寻找客户可能的修复/替代在火狐边d3.js svg下载。

$ b

感谢您的提前！

解决方案

好的，我已经解决了只允许指定一个按钮（与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）; 
 
函数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，\\\
+ btoa（unescape（encodeURIComponent（html））））
}; 
 
 var idselector =＃+ p.graph.svg.downloadID; 
 
 d3.select（idselector）
 .on（mouseover，writeDownloadLink）; 
 
 
 
 
 $ b不是我一开始想到的， 。  
I have been lookig around for a way to download the generated svg from d3.js and I either end up with phantom.js which seems kinda overkill (or at least intimidating given the "simplicity" of the problem) or svg-crowbar.js which is apparently only for chrome (I need firefox). 

I also found the following code:
//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>
on https://groups.google.com/forum/#!topic/d3-js/RnORDkLeS-Q

Which should download the svg (if I could get it to work). I was thinking that instead of supplying a download button, clicking a certain svg-element should also do? I currently have the following code but it doesn't work:
 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);
the svg only draws the rectangle should allow you to download the svg (with the rectangle) as an .svg file when the rectangle is pressed. I don't know if I am on the right track here.

I am very new to d3.js but basically I am looking for a possible fix / alternative for client side d3.js svg download in Firefox. Preferably I would have the download "button" as part of the svg.

thanks in advance!
解决方案
Ok , I have settled with just allowing the specification of a button (with downloadID) and have added this in the code after creating the 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);

            } 
Not what I had in mind at first but works for me. 

                        
这篇关于d3.js下载图形作为svg图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！