Estoy tratando de usar D3 en un componente React dentro de una aplicación Express . Parece que debería ser una tarea bastante fácil, pero seguir varios tutoriales no dirigidos a una aplicación Express no funcionó: en el ejemplo a continuación, obtengo un svg vacío ( <!DOCTYPE html><div><p>D3 Example</p><svg></svg></div> ) sin el círculo rojo.
Una posible explicación es que React.useEffect no se ejecuta en el servidor . Sin embargo, no entiendo por qué esto no se ejecuta después de cargar Javascript. En cualquier caso, no puedo encontrar cómo solucionar este problema, por lo que agradeceré cualquier ayuda para comprenderlo mejor o una solución :)
Enumero mi código relevante a continuación. Soy bastante nuevo con Node, así que traté de ceñirme a las convenciones de ejemplo de Express.
var simulationRouter = require('./routes/simulation'); var app = express(); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jsx'); app.engine('jsx', require('express-react-views').createEngine()); ... app.use('/simulation', simulationRouter); var express = require('express'); var router = express.Router(); router.get('/', function(req, res, next) { res.render('d3_show_nolib'); }); module.exports = router; import React, { useEffect, useRef } from "react"; import { select } from "d3"; export default function App() { const svgRef = useRef(); useEffect(() => { const svg = select(svgRef.current); const getData = () => { svg .append("circle") .attr("r", 15) .attr("fill", "red") .attr("stroke", 1.5); }; getData(); }, []); return ( <div> <p>D3 Exemple</p> <svg ref={svgRef}></svg> </div> ); }(Espero que esto funcione como el siguiente archivo html único:
<html> <head> <script src="https://d3js.org/d3.v7.min.js"></script> </head> <body> <svg id='svg'></svg> <script> var svg = d3.select('#svg'); svg.attr('width', 100) .attr('height', 100); svg .append("circle") .attr("r", 15) .attr("fill", "red") .attr("stroke", 1.5) .attr('cx', 10) .attr('cy', 10); </script> </body> </html>)