D3.js + React 在线编辑调试，实时预览、在线运行。

index.html

jsx

index.jsx

styles.css

jsx

App.jsx

jsx

LinePlot.jsx

package.json

            
                1
2
3
4
5
6
7
8
9
10
11
12

            
            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./index.jsx"></script>
</head>
<body>
    <div id="root"></div>

</body>
</html>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14

            
            import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App.jsx";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

            
                1
2
3
4
5

            
            .App {
  font-family: sans-serif;
  text-align: center;
}

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

            
            import * as d3 from "d3";
import { useState } from "react";
import "./styles.css";
import LinePlot from "./LinePlot.jsx";

export default function App() {
  const [data, setData] = useState(() => d3.ticks(-2, 2, 200).map(Math.sin));

  function onMouseMove(event) {
    const [x, y] = d3.pointer(event);
    setData(data.slice(-200).concat(Math.atan2(x, y)));
  }

  return (
    <div onMouseMove={onMouseMove}>
      <LinePlot data={data} />
    </div>
  );
}

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

            
            import * as d3 from "d3";

export default function LinePlot({
  data,
  width = 640,
  height = 400,
  marginTop = 20,
  marginRight = 20,
  marginBottom = 20,
  marginLeft = 20
}) {
  const x = d3.scaleLinear(
    [0, data.length - 1],
    [marginLeft, width - marginRight]
  );
  const y = d3.scaleLinear(d3.extent(data), [height - marginBottom, marginTop]);
  const line = d3.line((d, i) => x(i), y);
  return (
    <svg width={width} height={height}>
      <path
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        d={line(data)}
      />
      <g fill="white" stroke="currentColor" stroke-width="1.5">
        {data.map((d, i) => (
          <circle key={i} cx={x(i)} cy={y(d)} r="2.5" />
        ))}
      </g>
    </svg>
  );
}

            
                1
2
3
4
5
6
7
8

            
            {
  "dependencies": {
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "d3": "7.9.0"
  }
}

预览

控制台

清空