Search code examples
javascriptnode.jsd3.jsrickshaw

Using Rickshaw/D3 in Node.js,for server side, raw svg accessible?

I'm trying to use D3 and Rickshaw in Node. The service must create a time-series graph, and then transform the raw SVG into a png using a child process running imagemagick. I really just need a raw svg string to do my conversion. Does rickshaw have any way to access a raw SVG string?

Solution

  • Rickshaw uses d3 internally and you can get the SVG string just like you would in a real DOM:

    var Rickshaw = require('rickshaw'),
    jsdom = require('jsdom');

jsdom.env({
    features: { QuerySelector: true },
    html: '<html><body><div id="graph"></div></body></html>',
    done: function (err, window) {
        this.window = window;
        this.document = window.document;
        // classListShim(window.self); // <-- see comment below

        var graph = new Rickshaw.Graph({
            series: [ { data: [ { x: 0, y: 2 }, { x: 1, y: 4 }] } ],
            renderer: 'area',
            element: window.document.querySelector('#graph')
        });

        graph.render();
        // This will output the `svg` element in HTML format.
        console.log(window.document.querySelector('#graph').innerHTML);
    }
});

    However, because curretly jsdom does not support classList, you'll need to use the classList shim applied on window.self.

    Complete code: https://gist.github.com/musically-ut/9154438