主角：3D Force-Directed Graph
简介：一个使用ThreeJS/WebGL进行3D渲染的Graph图库
GitHub: https://github.com/vasturiano/3d-force-graph
Ps: 较为复杂或节点巨大时，对GPU>CPU消耗较大，同量级节点对比下优于AntV G6和Echarts渲染

效果

环境

• 3d-force-graph: ^1.73.3
• next: 14.1.3
• react: ^18

目录

仅包含涉及到的文件

| - app|- page.tsx
| - components|- ForceGraphW3D|- data.ts|- index.tsx

实操

演示数据

由于效果展示的演示过于庞大，以下仅展示基本数据结构

• components/ForceGraphW3D/data.ts

// 来源：https://vasturiano.github.io/3d-force-graph/example/datasets/blocks.json
export default {"nodes": [ // 拥有的节点及扩展数据{"id": "4062045","user": "mbostock","description": "Force-Directed Graph"},// .....],"links": [ // 建立节点关系，根据nodes的id字段进行关联{"source": "950642","target": "4062045"},// .....]
}

创建EchartsGraph组件

• components/ForceGraphW3D/index.tsx

"use client";import type {ConfigOptions, ForceGraph3DInstance} from "3d-force-graph";
import React, {useEffect, useRef} from "react";
import ForceGraph3D from '3d-force-graph';
import data from "./data"type Props = {children?: React.ReactNode
}const ForceGraph3DOptions: ConfigOptions = {}let _forceGraph3D: ForceGraph3DInstance | undefined = undefined;
let _graph: ForceGraph3DInstance | undefined = undefined;const ForceGraphW3D = function (props: Props) {const containerRef = useRef<HTMLDivElement>(null);const graphRef = useRef<HTMLDivElement>(null);function graphInit(elm: HTMLDivElement) {if (!containerRef) return;// 只能在客户端模式下载入if (typeof window !== 'undefined') {// 构建实例化if (!_forceGraph3D) {_forceGraph3D = ForceGraph3D(ForceGraph3DOptions);}// 绑定容器元素_graph = _forceGraph3D(elm);// 实例配置_graph.width(containerRef.current?.offsetWidth || 800).height(containerRef.current?.offsetHeight || 800).graphData(data);}}useEffect(() => {if (graphRef.current) {graphInit(graphRef.current);}}, [graphRef]);return (<div ref={containerRef}><div ref={graphRef}></div>{props.children}</div>)
}export default ForceGraphW3D;

页面调用

"use client";import ForceGraphW3D from "@/component/ForceGraphW3D";const Page = function () {return (<div style={{width: '100%', height: '100%',overflow: 'hidden'}}><ForceGraphW3D /></div>);
}export default Page;

---

如果大家对其他实战实例感兴趣，请在下面留言，我会尽快更新。