Javascript (D3+React_簡単なサンプル)

■D3+Reactでサンプルをつくる。
D3でグラフを作り、Reactでグラフ部分だけを更新するといった形で何か作りたい。
ReactでD3を使うために、まずコマンドプロンプトから npm install d3 でインストール。
コマンドを実行したパス配下に node_modules フォルダができてその中にd3関連のファイルが入った。

同じフォルダで npm list --depth=0 コマンドを実行してインストールされたことが確認できる。

簡単なサンプルを動かして動作確認（D3の公式関連のページを参考にした）。

import { useRef, useEffect, useState } from "react";
import * as d3 from "d3";

export default function App3() {
    const [domainMax, setDomainMax] = useState(100);
    const ref = useRef();

    useEffect(() => {
        const svgElement = d3.select(ref.current);
        svgElement.selectAll("*").remove();
        // 以前の軸を削除 
        const xScale = d3.scaleLinear()
            .domain([0, domainMax])
            .range([10, 290]);
        const axisGenerator = d3.axisBottom(xScale);
        svgElement.append("g")
            .attr("transform", "translate(0,30)")
            .call(axisGenerator);
    }, [domainMax]); // domainMaxが変わったら再描画
    return (
        <div>
            <div> <label>最大値: </label>
                <input type="number" value={domainMax}
                    onChange={e => setDomainMax(Number(e.target.value))} />
            </div>
            <svg ref={ref} width={300} height={50} />
        </div>);
}

目盛の最大値を変更して、バー上の表示を更新するサンプル。

スムーズに動いているように見えるけど、比較がないとなかなかありがたみが分からない。
とりあえずは D3+React で何か作る環境は整った。