Skip to content

Instantly share code, notes, and snippets.

@mattbaker

mattbaker/jsdomtest.js

Created December 22, 2011 20:40
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save mattbaker/1511770 to your computer and use it in GitHub Desktop.
Save mattbaker/1511770 to your computer and use it in GitHub Desktop.
Download ZIP
Build a pie chart using d3.js and send the result to stdout
Raw
jsdomtest.js
/* 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
Copy link

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
Copy link
Author

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

@oulan
Copy link

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
Copy link

oulan commented Jan 19, 2012

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

@mattbaker
Copy link
Author

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