Create a gist now

Instantly share code, notes, and snippets.

Build a pie chart using d3.js and send the result to stdout
/* jsdomtest.js: Build a pie chart using d3.js and send the result to stdout
* Requires d3.js and d3.layout.js in same directory
* Requires pie.js from this gist: https://gist.github.com/1509145
* ex. node jsdomtest.js > pie.svg
*/
var jsdom = require('jsdom'),
scripts = ["file://"+__dirname+"/d3.min.js",
"file://"+__dirname+"/d3.layout.min.js",
"file://"+__dirname+"/pie.js"],
htmlStub = '<!DOCTYPE html><div id="pie" style="width:'+400+'px;height:'+400+'px;"></div>';
jsdom.env({features:{QuerySelector:true}, html:htmlStub, scripts:scripts, done:function(errors, window) {
var svgsrc = window.insertPie("#pie", 400, 400, [0.25,0.25,0.5]).innerHTML;
console.log(svgsrc);
}});
@oulan
oulan commented Jan 19, 2012

I test this code with node.js 0.6.4 under Ubuntu. But I get a "querySelector" error with node-inspector.

@mattbaker
Owner

Great catch oulan, thank you. I forgot to provide QuerySelector:true here. Can you try this updated gist and let me know?

@oulan
oulan commented Jan 19, 2012

I try with these code:
1.

jsdom.defaultDocumentFeatures = { QuerySelector : true}; 
jsdom.env(htmlStub, scripts, { features: {QuerySelector : true } }
    function(errors, window) {
    console.log(errors);
    var svg = window.insertPie("#pie", 400, 400, [0.25,0.25,0.5]);
    var svgsrc = svg.innerHTML;
    console.log(svgsrc);
    }
);

Still catch "querySelector" error

When I try these after 'htmlStub' line :

require('sizzle');

jsdom.defaultDocumentFeatures = { 'QuerySelector' : true};    

I get a reference error of "document is not defined " at sizzle.js 908:6

@oulan
oulan commented Jan 19, 2012

Oh. Thanks. I try the code you newly committed. It's ok now. Thank you.

@mattbaker
Owner

Great! Glad to hear it. I updated the other gist with the small http server as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment