Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

64
Views
Use React+D3 in Express

I am trying to use D3 in a React component within an Express app. It seems like it should be a rather easy task, but following various tutorials not targeted to an Express app did not work: in the example below, I get an empty svg (<!DOCTYPE html><div><p>D3 Example</p><svg></svg></div>) without the red circle.

A possible explanation is that React.useEffect does not run on server. However, I do not understand why this does not run after the Javascript is loaded. In any case, I cannot find how to work around this problem, so any help to understand it better or a solution will be appreciated :)


I list my relevant code below. I am rather new with Node, so I tried to stick to Express example conventions.

app.js

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);

routes/simulation.js

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('d3_show_nolib');
});

module.exports = router;

views/d3_show_nolib.js

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>
  );
}

(I expect this to work as the following single html file:

<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>

)

7 months ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.