Skip to main content

d3.js サンプル

TODO: これは component 関係ないような

呼び出し​

sample.md
import SampleD3 from '@site/src/components/SampleD3';

D3.js のサンプルです。

<SampleD3 />

出力​

D3.js のサンプルです。

コンポーネントの定義​

src/components/SampleD3.tsx
import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';

const SampleD3: React.FC = () => {
  const svgRef = useRef<SVGSVGElement | null>(null);

  useEffect(() => {
    if (!svgRef.current) return;

    const svg = d3.select(svgRef.current);
    svg.selectAll('*').remove();

    svg
      .append('circle')
      .attr('cx', 50)
      .attr('cy', 50)
      .attr('r', 40)
      .attr('fill', 'skyblue');
  }, []);

  return <svg ref={svgRef} width={100} height={100} />;
};

export default SampleD3;