Quiero usar el lado del servidor d3 para crear archivos PNG, directamente o mediante SVG. Puedo encontrar una serie de discusiones aquí sobre cómo lograr esto, pero todas son de hace muchos años, se refieren a d3 v3 o v4, y node se remonta a v10. ¿Todavía es necesario pretender que estamos en un navegador, proporcionando un pseudo-DOM usando algo como jsdom ? ¿Sigue funcionando la familia alternativa de paquetes d3-node ? En su mayoría no han tenido actualizaciones durante algunos años.
Aquí está mi MNWE en el nodo 17.0.1, d3 7.1.1, d3-node 2.2.3 en 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); Obtengo los siguientes errores en la penúltima línea que surge en la biblioteca d3node-barchart :
/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 El mensaje de error dice que d3n-barchart no encuentra data donde espera que estén.
Mirando el archivo que arroja el error: node_modules/d3node-barchart/index.js , parece que la bar de funciones espera un objeto como parámetro, y no una matriz de datos como primer parámetro.
function bar({ data, selector: _selector = '#chart', ...Parece que la sintaxis que se muestra en el LÉAME de d3n-bar es incorrecta.
Como se muestra en el archivo de ejemplo de la biblioteca, la función d3nBar toma un objeto como parámetro de entrada, con una propiedad data .
Aplicar la sintaxis del archivo de ejemplo de d3n-barchart resuelve el error:
const bar = d3nBar({ data: csvData , selector: selector , container: container , style: style })Es posible que desee corregir el archivo LÉAME de d3n-barchart y enviar una solicitud de extracción para ayudar a los futuros usuarios a obtener su código correctamente :)