Skip to content

Instantly share code, notes, and snippets.

@benoitv-code

benoitv-code/index.js

Last active November 13, 2022 18:21
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save benoitv-code/148eadcfde3e978a1ad1d3ec9e2a7265 to your computer and use it in GitHub Desktop.
Save benoitv-code/148eadcfde3e978a1ad1d3ec9e2a7265 to your computer and use it in GitHub Desktop.
Download ZIP
d3, jsdom, node.js: server-side rendering
Raw
index.js
// Instructions:
// npm install --save d3 jsdom
const fs = require('fs');
const d3 = require('d3');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const fakeDom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
const outputLocation = './output.svg';
let body = 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());
@JoybasakQumaOne
Copy link

JoybasakQumaOne commented Feb 5, 2020 •
edited

Hie, I was trying to implement the same to my project and its throwing the following error -
"Cannot find module 'd3'"
I'm pretty certain that its not able to detect d3 library which is installed in my local. Are you using d3 npm package or the standard javascript library ?

@benoitv-code
Copy link
Author

Hie, I was trying to implement the same to my project and its throwing the following error -
"Cannot find module 'd3'"
I'm pretty certain that its not able to detect d3 library which is installed in my local. Are you using d3 npm package or the standard javascript library ?

Hi @JoybasakQumaOne, it's using d3 from npm, the installation instructions are on top of the file: npm install --save d3 jsdom

@alexp1917
Copy link

it should now be https://gist.github.com/alexp1917/e2b62c89d929847aa3e3e8aecf9a3063

const d3 = import('d3');
async function main() {
  // ...
  // top level async is evil ...
  let body = (await d3).select(fakeDom.window.document).select('body');
  // ...
}
main();

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