Exporting D3.js graphs to static SVG files, programmatically

Question

I'm generating a large number of D3 graphs programmatically. They currently consist of HTML with SVG, CSS, and JS.

I would like to export these graphs to plain SVG programmatically. I'm having trouble figuring out how to do this.

The closest solution I found is this: Convert JavaScript-generated SVG to a file -- but the problem is that I need to do it programmatically, rather than by using a tool like Chrome Developer Tools or SVG Crowbar which requires manual clicking/saving.

I'd prefer to use Python, but at this point I am open to any tools/programming language.

See also http://stackoverflow.com/questions/19080929/ – Hugolpz Apr 26 '14 at 08:35 — Hugolpz, Apr 26 '14 at 08:35

score 18 · Accepted Answer · answered Aug 14 '13 at 20:01

Here's what I would do:

Download and install phantomjs, which is a headless webkit browser you can run from the command line and automate via scripts.

Save this javascript as renderHTML.js:

var args = require('system').args,
    page = require('webpage').create(),
    url = args[1];

page.onConsoleMessage = function (msg) {
    console.log(msg);
};

page.onLoadFinished = function() {
    page.evaluate(function() {
        console.log(document.documentElement.outerHTML);
    });
    phantom.exit();
};

page.open(url);

Run phantomjs with the above script specifying the url to render, like so:
```
phantomjs renderHTML.js {urltorender} > {localfiletosave}
```
You now have the entire HTML content of the document at the specified URL, including dynamic content modifications done via javascript (until page load) in a local file. Post process the local file to meet your requirements using whatever language you like.

If you need further javascript modifications before saving the file, you can use the phantomjs api to dispatch and/or wait for events before calling console.log. Just modify the script in step 2.

If you happen to know and like javascript, you can skip step 4 and put whatever "post processing" you have in mind directly into the script in step 2.

Begginer at NodeJS, could you clarify what `{urltorender}` is, or give an example. You mean something like : `phantomjs renderHTML.js /home//Documents/D3js/ > myfile.svg` ? — Hugolpz, Oct 24 '13 at 21:24
More like: `phantomjs renderHTML.js http://example.com/some/page.html > myfile.svg` or `phantomjs renderHTML.js file:///home//some/page.html > myfile.svg` — Ray Waldin, Oct 25 '13 at 03:38

score 4 · Answer 2 · answered Aug 09 '14 at 04:53

I wrote a short Javascript program to do this.

You can get it off npm by running npm install -g playfair (code is on GitHub at manleyjster/playfair).

It runs from the command line, and it works by firing up PhantomJS, pointing it to an html file (which you pass in on the command line), and then capturing the first SVG element that it finds on the page.

You can also pass in an id via a command line option to select an SVG element by id.

The meat of the program is this function:

function getSvg(selector) {
    var svgNode, tmp;

    svgNode = document.querySelector(selector);

    if (svgNode) {
        tmp = document.createElement('div');
        tmp.appendChild(svgNode);
        result = { text: tmp.innerHTML };
    } else {
        result = {};
    }

    return result;
}

score 2 · Answer 3 · answered Aug 14 '13 at 19:54

2

You can do this with, phantomJS. Its a headless web browser, so you can write a script to pull out the svg from your page and write it to file.

answered Aug 14 '13 at 19:54

Andy Thornton

628
5
11

Exporting D3.js graphs to static SVG files, programmatically

3 Answers3

Linked