【React】基于JS 3D引擎库实现关系图(图&graph)

主角：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
1
2
3
4
5
6

实操

演示数据

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

• 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"
        },
        // .....
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

创建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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

页面调用

"use client";

import ForceGraphW3D from "@/component/ForceGraphW3D";

const Page = function () {
    return (
        <div style={{width: '100%', height: '100%',overflow: 'hidden'}}>
            <ForceGraphW3D />
        </div>
    );
}

export default Page;
1
2
3
4
5
6
7
8
9
10
11
12
13

---

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