-
-
Save jpcofr/7e83639db0365acd66258b3ada169ee1 to your computer and use it in GitHub Desktop.
proof-of-concept pre-rendering d3.js svgs on the server using node.js and jsdom module.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // pre-render d3 charts at server side | |
| var d3 = require('d3') | |
| , jsdom = require('jsdom') | |
| , fs = require('fs') | |
| , htmlStub = '<html><head></head><body><div id="dataviz-container"></div><script src="js/d3.v3.min.js"></script></body></html>' | |
| jsdom.env({ | |
| features : { QuerySelector : true } | |
| , html : htmlStub | |
| , done : function(errors, window) { | |
| // this callback function pre-renders the dataviz inside the html document, then export result into a static file | |
| var el = window.document.querySelector('#dataviz-container') | |
| , body = window.document.querySelector('body') | |
| , circleId = 'a2324' // say, this value was dynamically retrieved from some database | |
| // generate the dataviz | |
| d3.select(el) | |
| .append('svg:svg') | |
| .attr('width', 600) | |
| .attr('height', 300) | |
| .append('circle') | |
| .attr('cx', 300) | |
| .attr('cy', 150) | |
| .attr('r', 30) | |
| .attr('fill', '#26963c') | |
| .attr('id', circleId) // say, this value was dynamically retrieved from some database | |
| // make the client-side script manipulate the circle at client side) | |
| var clientScript = "d3.select('#" + circleId + "').transition().delay(1000).attr('fill', '#f9af26')" | |
| d3.select(body) | |
| .append('script') | |
| .html(clientScript) | |
| // save result in an html file, we could also keep it in memory, or export the interesting fragment into a database for later use | |
| var svgsrc = window.document.innerHTML | |
| fs.writeFile('index.html', svgsrc, function(err) { | |
| if(err) { | |
| console.log('error saving document', err) | |
| } else { | |
| console.log('The file was saved!') | |
| } | |
| }) | |
| } // end jsDom done callback | |
| }) | |
| // no semi-column was harmed during this development |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment