Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using d3.js (aka Data-Driven Documents) without browser with help of jsdom. This allows for server-side rendering or programmatic use in any other contexts than browser.
d3 = require("d3");
jsdom = require("jsdom");
document = jsdom.jsdom();
window = document.parentWindow;
var sampleSVG = d3.select(document.body)
.append("svg")
.attr("width", 100)
.attr("height", 100)
sampleSVG.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 50);
document.getElementsByTagName("svg")[0].setAttribute("xmlns", d3.ns.prefix.svg);
xmlbase = '<?xml version="1.0" encoding="UTF-8"?>'
xmlbase += "\n";
xmlbase += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
console.log(xmlbase);
console.log(document.body.innerHTML);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment