公式ページの始め方です。英語で書いてあるので難しいかもしれないです。
https://d3js.org/getting-started
ViteでReactの環境を導入する。
公式ドキュメント
https://ja.vitejs.dev/
以下のコマンドで、Reactのテンプレートを作ることができます。
Viteは高速なビルドツールです。（早くReactを動かすことができる）
npm create vite@latest my-d3-app -- --template react
my-d3-appディレクトリに移動してください。
cd my-d3-app
最初に必要なパッケージをインストールしてください。
npm install
このコマンドを実行すると特に意味のないページが表示されます。
これが動けば正常に動いている常態です。
npm run dev
d3.jsを使えるようにする。
npm install d3
src内を以下のように変更してください。
LinePlot.jsxはファイルがないと思うので作成してください。
src/App.jsx
import * as d3 from "d3";
import { useState } from "react";
import LinePlot from "./LinePlot";
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>
);
}
src/LinePlot.jsx
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"
strokeWidth="1.5"
d={line(data)}
/>
<g fill="white" stroke="currentColor" strokeWidth="1.5">
{data.map((d, i) => (
<circle key={i} cx={x(i)} cy={y(d)} r="2.5" />
))}
</g>
</svg>
);
}
これでとりあえず動く状態なはず！
動作確認をしてみましょう。
npm run dev
ポートは変わっていたらそこは直してください。
http://localhost:5173/ にアクセスするとこのような画面が表示されます。
これで一旦完成です自分で改造したりとか、 https://d3js.org/ を見て全く新しいものを作成しましょう。
]]>