Best way to use recent D3 versions to produce PNGs from node.js?-CodePudding

I'm wanting to use d3 server side to create PNG files, directly or via SVG. I can find a number of discussions here about how to achieve this, but they're all from many years ago, referring to d3 v3 or v4, and node back to v10. Is it still necessary to pretend we're in a browser, providing a pseudo-DOM using something like jsdom? Does the alternative d3-node family of packages actually still work? They're mostly not had updates for some years.

Here's my MNWE on node 17.0.1, d3 7.1.1, d3-node 2.2.3 on macOS 11.6:

const fs = require('fs');
const d3 = require('d3-node')().d3;
const output = require('d3node-output');
const d3nBar = require('d3node-barchart');
// const d3nPie = require('d3node-piechart');
// const csvString = fs.readFileSync('mentions.csv').toString();
const csvString=`key,value
Bob,33
Robin,12
...
Stacy,20
Charles,13
Mary,29`
const csvData = d3.csvParse(csvString);

const selector = `#chart`
const container = `<div id="container"><h2>Bar Chart</h2><div id="chart"></div></div>`
const style = `.bar{fill: steelblue;}
.bar:hover{fill: brown;}
.axis{font: 10px sans-serif;}
.axis path,.axis line{fill: none;stroke: #000;shape-rendering: crispEdges;}
.x.axis path{display: none;}`

// create output files
// const pie = d3nPie(csvData, selector, container, style)
const bar = d3nBar(csvData, selector, container, style)
output('output', bar);

I get the following errors in the penultimate line arising in the d3node-barchart library:

/Users/j/Dropbox/NP-other-tests/node_modules/d3node-barchart/index.js:55
  x.domain(data.map((d) => d.key));
                ^

TypeError: Cannot read properties of undefined (reading 'map')
    at bar (/Users/j/Dropbox/NP-other-tests/node_modules/d3node-barchart/index.js:55:17)
    at Object.<anonymous> (/Users/j/Dropbox/NP-other-tests/d3test.cjs:45:13)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

CodePudding user response：

Investigation

The error message tells that d3n-barchart does not find data where it expects it to be.

Looking at the file throwing the error: node_modules/d3node-barchart/index.js, it appears that function bar expects one object as parameter, and not a data array as first parameter.

function bar({
  data,
  selector: _selector = '#chart',
  ...

It seems that the syntax shown in the README of d3n-bar is incorrect.

As shown in the example file of the library, function d3nBar takes one object as input parameter, with a data property.

Solution

Applying the syntax from d3n-barchart's example file solves the error:

const bar = d3nBar({
    data: csvData
    , selector: selector
    , container: container
    , style: style
})

You might want to correct d3n-barchart's README file and submit a pull request, to help future users get their code right :)