时间戳

首页 > 解决方案 > 在 Express 中使用 React+D3

javascript - 在 Express 中使用 React+D3

问题描述

我正在尝试在 Express 应用程序的 React 组件中使用 D3 。看起来这应该是一项相当容易的任务，但是遵循不针对 Express 应用程序的各种教程不起作用：在下面的示例中，我得到一个<!DOCTYPE html><div><p>D3 Example</p><svg></svg></div>没有红色圆圈的空 svg ( )。

一个可能的解释是React.useEffect 它不在服务器上运行。但是，我不明白为什么在加载 Javascript后它不运行。无论如何，我找不到解决此问题的方法，因此将不胜感激任何有助于更好地理解它或解决方案的帮助:)

我在下面列出了我的相关代码。我对 Node 比较陌生，所以我尝试坚持 Express 示例约定。

应用程序.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);

路线/simulation.js

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

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

module.exports = router;

意见/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>
  );
}

（我希望这可以作为以下单个 html 文件工作：

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

)

标签： javascriptnode.jsreactjsexpressd3.js

解决方案

推荐阅读