ネットワークグラフライブラリ比較

'use client';
import { ResponsiveNetwork } from '@nivo/network';

const data = {
  nodes: [
    { id: 'A', radius: 12, color: '#3b82f6' },
    { id: 'B', radius: 10, color: '#10b981' },
    { id: 'C', radius: 10, color: '#10b981' },
    { id: 'D', radius: 8, color: '#8b5cf6' },
    { id: 'E', radius: 8, color: '#8b5cf6' },
    { id: 'F', radius: 8, color: '#f97316' },
  ],
  links: [
    { source: 'A', target: 'B', distance: 80 },
    { source: 'A', target: 'C', distance: 80 },
    { source: 'B', target: 'D', distance: 60 },
    { source: 'B', target: 'E', distance: 60 },
    { source: 'C', target: 'F', distance: 60 },
  ],
};

export function NivoNetworkGraph() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveNetwork
        data={data}
        margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
        linkDistance={(e) => (e as any).distance}
        centeringStrength={0.3}
        repulsivity={6}
        nodeColor={(n) => (n as any).color}
        nodeBorderWidth={1}
        nodeBorderColor={{ from: 'color', modifiers: [['darker', 0.8]] }}
        linkThickness={(n) => 2}
        linkBlendMode="multiply"
        motionConfig="wobbly"
      />
    </div>
  );
}

'use client';
import { useEffect, useRef } from 'react';
import * as d3 from 'd3';

const nodes = [
  { id: 'A', r: 12 }, { id: 'B', r: 10 }, { id: 'C', r: 10 },
  { id: 'D', r: 8 }, { id: 'E', r: 8 }, { id: 'F', r: 8 },
];
const links = [
  { source: 'A', target: 'B' }, { source: 'A', target: 'C' },
  { source: 'B', target: 'D' }, { source: 'B', target: 'E' },
  { source: 'C', target: 'F' },
];

export function D3NetworkGraph() {
  const svgRef = useRef<SVGSVGElement>(null);

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    const { width, height } = svgRef.current!.getBoundingClientRect();

    const simulation = d3.forceSimulation(nodes as any)
      .force('link', d3.forceLink(links as any).id((d: any) => d.id).distance(80))
      .force('charge', d3.forceManyBody().strength(-200))
      .force('center', d3.forceCenter(width / 2, height / 2));

    const link = svg.append('g').selectAll('line').data(links).enter().append('line')
      .attr('stroke', '#d1d5db').attr('stroke-width', 2);

    const node = svg.append('g').selectAll('circle').data(nodes).enter().append('circle')
      .attr('r', (d) => d.r).attr('fill', '#3b82f6').attr('stroke', '#fff').attr('stroke-width', 2)
      .call(d3.drag<any, any>()
        .on('start', (e, d) => { if (!e.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; })
        .on('drag', (e, d) => { d.fx = e.x; d.fy = e.y; })
        .on('end', (e, d) => { if (!e.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; })
      );

    simulation.on('tick', () => {
      link.attr('x1', (d: any) => d.source.x).attr('y1', (d: any) => d.source.y)
          .attr('x2', (d: any) => d.target.x).attr('y2', (d: any) => d.target.y);
      node.attr('cx', (d: any) => d.x).attr('cy', (d: any) => d.y);
    });

    return () => { simulation.stop(); svg.selectAll('*').remove(); };
  }, []);

  return <svg ref={svgRef} style={{ width: '100%', height: 300 }} />;
}

'use client';
import dynamic from 'next/dynamic';

const ForceGraph2D = dynamic(() => import('react-force-graph').then(m => m.ForceGraph2D), { ssr: false });

const data = {
  nodes: [
    { id: 'A', group: 1 }, { id: 'B', group: 2 }, { id: 'C', group: 2 },
    { id: 'D', group: 3 }, { id: 'E', group: 3 }, { id: 'F', group: 3 },
  ],
  links: [
    { source: 'A', target: 'B' }, { source: 'A', target: 'C' },
    { source: 'B', target: 'D' }, { source: 'B', target: 'E' },
    { source: 'C', target: 'F' },
  ],
};

const colors = ['', '#3b82f6', '#10b981', '#8b5cf6'];

export function ForceGraphNetwork() {
  return (
    <ForceGraph2D
      graphData={data}
      width={400}
      height={300}
      nodeColor={(n: any) => colors[n.group]}
      nodeRelSize={6}
      linkColor={() => '#d1d5db'}
    />
  );
}