Skip to content

Instantly share code, notes, and snippets.

@alexp1917
Forked from benoitv-code/index.js
Created August 1, 2021 22:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexp1917/e2b62c89d929847aa3e3e8aecf9a3063 to your computer and use it in GitHub Desktop.
Save alexp1917/e2b62c89d929847aa3e3e8aecf9a3063 to your computer and use it in GitHub Desktop.
d3, jsdom, node.js: server-side rendering
// Instructions:
// npm install --save d3 jsdom
const fs = require('fs');
const d3 = import('d3');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
async function main() {
const fakeDom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
const outputLocation = './output.svg';
let body = (await d3).select(fakeDom.window.document).select('body');
// Make an SVG Container
let svgContainer = body.append('div').attr('class', 'container')
.append("svg")
.attr("width", 1280)
.attr("height", 1024);
// Draw a line
let circle = svgContainer.append("line")
.attr("x1", 5)
.attr("y1", 5)
.attr("x2", 500)
.attr("y2", 500)
.attr("stroke-width", 2)
.attr("stroke", "black");
// Output the result to console
console.log(body.select('.container').html());
// Output the result to file
fs.writeFileSync(outputLocation, body.select('.container').html());
}
main();
@schof
Copy link

schof commented Nov 5, 2021

Good stuff. Thanks for this.

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