d3.js download graph as svg image

Question

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!

score 6 · Accepted Answer · answered Jun 12 '14 at 12:57

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.

What is elementid? is it the button or a new element to save the link to? — Zakher Masri, Sep 27 '18 at 17:43

maia · Answer 2 · 2016-04-13T19:57:37.433

2

I've modified the svg-crowbar script to be a function called downloadSVG() that can be called from within your script. The function downloads SVG(s) on the webpage. The function can be found at: https://bitbucket.org/mas29/public_resources/raw/b9bafa002053b4609bd5186010d19e959cba33d4/scripts/js/svg_download/downloadSVG.js.

Let's say you have a button that, when pushed, should download the SVG(s). Just tack on the downloadSVG() as part of the "click" function, like so:

d3.select("body").append("button")
        .attr("type","button")
        .attr("class", "downloadButton")
        .text("Download SVG")
        .on("click", function() {
            // download the svg
            downloadSVG();
        });

edited Apr 13 '16 at 19:57

answered Apr 13 '16 at 19:30

maia

3,910
4
27
34

And if you prefer to download a single SVG with a particular classname, use: https://bitbucket.org/mas29/public_resources/raw/52d9a5439ab928e18d942ce52ed5016388f9bdb6/scripts/js/svg_download/downloadSVGByClass.js. Call downloadSVG(myClassName); – maia Apr 13 '16 at 21:02
Fails in chrome 64+ I believe – Alex Lenail Apr 14 '18 at 21:28

score 2 · Answer 3 · answered Apr 14 '18 at 21:40

I found this block to have the best solution.

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

d3.js download graph as svg image

3 Answers3

Linked