Name: d3-node
Owner: D3-Node
Description: Server-side D3 for static chart/map generation ??
Created: 2016-07-13 21:06:21.0
Updated: 2018-02-19 06:53:17.0
Pushed: 2017-12-12 16:14:33.0
Homepage: https://bradoyler.com/projects/d3-node/
Size: 814
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|---|---|
| Tedb0t | 2017-12-12 16:10:12.0 | 1 |
| brad oyler | 2017-12-12 16:12:48.0 | 81 |
| Xiang Gao | 2017-04-22 02:51:39.0 | 9 |
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Server-side D3 with ease
Requires Node 6+
Create a SVG
st D3Node = require('d3-node')
st d3n = new D3Node() // initializes D3 with container element
.createSVG(10,20).append('g') // create SVG w/ 'g' tag and width/height
.svgString() // output: <svg width=10 height=20 xmlns="http://www.w3.org/2000/svg"><g></g></svg>
Setting container & insertion point via selector
st options = { selector: '#chart', container: '<div id="container"><div id="chart"></div></div>' }
st d3n = new D3Node(options) // initializes D3 with container element
st d3 = d3n.d3
select(d3n.document.querySelector('#chart')).append('span') // insert span tag into #chart
.html() // output: <html><body><div id="container"><div id="chart"><span></span></div></div></body></html>
.chartHTML() // output: <div id="chart"><span></span></div>
Inline SVG styles
st d3n = new D3Node({styles:'.test {fill:#000;}'})
.createSVG().append('g')
.svgString()
Output
xmlns="http://www.w3.org/2000/svg"> defs> <style type="text/css"><![CDATA[ .test{fill:#000;} ]]></style> /defs> g></g> >
Create a canvas (for generating a png)
st canvasModule = require('canvas');
st d3n = new D3Node({ canvasModule }); // pass it node-canvas
st canvas = d3n.createCanvas(960, 500);
st context = canvas.getContext('2d');
draw on your canvas, then output canvas to png
vas.pngStream().pipe(fs.createWriteStream('output.png'));
m test