1

I have came across many topics concerning the various ways of exporting d3.js powered visuals into an image file. Those solutions may work for me sometimes, but I have a big motivation for finding an offline/IDE equivalent to this. In my case, there is a lot of time when I'm programming without access to the internet, but would still greatly benefit from being able to export a static PNG of the graph for use in documents/reports.

Even if I was to copy the relevant libraries to my local host, I don't think I could export an image. If I'm not mistaken, the available solutions thus far need the internet for queuing up the file. Here is what I mean, this is a snippet from one such method:

function getSVGString( svgNode ) {
    svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink');
    var cssStyleText = getCSSStyles( svgNode );
    appendCSS( cssStyleText, svgNode )

    var serializer = new XMLSerializer();
    var svgString = serializer.serializeToString(svgNode);
    svgString = svgString.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink=') // Fix root xlink without namespace
    svgString = svgString.replace(/NS\d+:href/g, 'xlink:href') // Safari NS namespace fix

Another reason is if I don't need to serve the file to users, I simply want to have a PNG for my own uses, it would seem to me that there would be an even simpler way to achieve this. And thus I wouldn't have to go through such elaborate steps as in the above example.

I could be wrong, either way, please let me know your thoughts on this.

Update:

Working example of my problem

Separate Attempt: Try #2

This one kind of works, the png downloads to drive at least, but it's not cropped right. Most of the graph is cropped out. I'm not sure how to fix that. I'm also not sure if the file type can be specified. I would like to choose download as 'graph.svg' sometimes too.

Update:

My persistent monkey see monkey do approach is getting me some progress. I can now save as png with the correct cropping. However, I cannot save the graph as an SVG. Which is funny, because that is kind of its original format. I would like to award this question to someone who can demonstrate with one of my live examples above how to save the graph as an svg.

On a side note, I'm including a very lengthy blob and file saver function within my graph's index.html and using a button to start the download. This is mostly because I'm against the clock and I'm starting to get desperate. Ultimately, if there was a more elegant solution that didn't require so many external libraries that would be great. Let me also add this approach is not ideal for multiple graphs. I currently have to add the button all functions to every index.html that has a graph I'd like to convert. I'm not a computer, and I can't iterate fast enough.

Arash Howaida
  • 2,575
  • 2
  • 19
  • 50

1 Answers1

1

The steps I see here are:

  1. find a way to take what has been created by D3.js. This will probably be a vector file in SVG format.
  2. use a command line tool (offline) to convert the SVG file to a Raster image (i.e. jpg, png)...

For the 1st step:

For the 2nd step:

Other findings:

Community
  • 1
  • 1
tgogos
  • 23,218
  • 20
  • 96
  • 128
  • I also came across that block that does both of the steps you mentioned. That's where I got the code snippet from in my post, actually. Although it does both steps, it can't work offline right? It's using several XML serializers, like: `svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink');` or is there a way to adapt for offline use? I also noticed your link for the first step also uses a similar xml serializer, could you explain how I can adapt either of these for offline? – Arash Howaida Mar 02 '17 at 10:09
  • I am not sure, but maybe this is just a way to create an SVG with the right [structure](https://www.w3.org/TR/SVG/struct.html), namespace, etc... I don't think that something is taking place online. – tgogos Mar 02 '17 at 10:19
  • I'm going with this approach: [save svg](http://stackoverflow.com/questions/23218174/how-do-i-save-export-an-svg-file-after-creating-an-svg-with-d3-js-ie-safari-an) Although png is useful, I do have many uses for the SVG format as well. And it is the first step in your post. Unfortunately, that is also where I am stuck. I am getting the error: cannot serialize string, attribute 1 is not of type node. I have a live graph that I tried to use this on. I put the code at line 113, just before my `d3.csv()` goes out of scope. [my graph](https://bl.ocks.org/diggetybo/c3d26a76995c8a278fa0f8abd779ba41) – Arash Howaida Mar 02 '17 at 14:03