d3-node

    2.2.3 • Public • Published

    D3-Node

    Build Status Codecov npm npm

    Server-side D3 with ease  

    Supports Node 8+

    maps and charts with d3-node

    see examples >

    js-standard-style

    Why?

    Basic usage:

    NPM

    Create a SVG

     const D3Node = require('d3-node')
     const d3n = new D3Node()      // initializes D3 with container element
     d3n.createSVG(10,20).append('g') // create SVG w/ 'g' tag and width/height
     d3n.svgString() // output: <svg width=10 height=20 xmlns="http://www.w3.org/2000/svg"><g></g></svg>

    Advanced usage

    Setting container & insertion point via selector

     const options = { selector: '#chart', container: '<div id="container"><div id="chart"></div></div>' }
     const d3n = new D3Node(options) // initializes D3 with container element
     const d3 = d3n.d3
     d3.select(d3n.document.querySelector('#chart')).append('span') // insert span tag into #chart
     d3n.html()   // output: <html><body><div id="container"><div id="chart"><span></span></div></div></body></html>
     d3n.chartHTML()   // output: <div id="chart"><span></span></div>

    Inline SVG styles

     const d3n = new D3Node({styles:'.test {fill:#000;}'})
     d3n.createSVG().append('g')
     d3n.svgString()

    Output

    <svg xmlns="http://www.w3.org/2000/svg">
       <defs>
         <style type="text/css"><![CDATA[ .test{fill:#000;} ]]></style>
       </defs>
       <g></g>
    <svg>

    Create a canvas (for generating a png)

     const canvasModule = require('canvas'); // supports node-canvas v1 & v2.x
     const d3n = new D3Node({ canvasModule }); // pass it node-canvas
     const canvas = d3n.createCanvas(960, 500);
     const context = canvas.getContext('2d');
     // draw on your canvas, then output canvas to png
     canvas.pngStream().pipe(fs.createWriteStream('output.png'));

    See examples for more...

    Run Tests:

    $ npm test
    

    TODOs:

    • Add more examples: (remote data, world map)
    • Create Gulp task
    • Add option to inject css/js into html output

    Install

    npm i d3-node

    DownloadsWeekly Downloads

    7,459

    Version

    2.2.3

    License

    MIT

    Unpacked Size

    1.79 MB

    Total Files

    23

    Last publish

    Collaborators

    • bradoyler