信誉好的广州外贸网站,seo初级入门教程,cms网站怎么做,电商网站成品案例主角#xff1a;3D Force-Directed Graph 简介#xff1a;一个使用ThreeJS/WebGL进行3D渲染的Graph图库 GitHub: https://github.com/vasturiano/3d-force-graph Ps: 较为复杂或节点巨大时#xff0c;对GPUCPU消耗较大#xff0c;同量级节点对比下优于AntV G6和Echarts… 主角3D Force-Directed Graph 简介一个使用ThreeJS/WebGL进行3D渲染的Graph图库 GitHub: https://github.com/vasturiano/3d-force-graph Ps: 较为复杂或节点巨大时对GPUCPU消耗较大同量级节点对比下优于AntV G6和Echarts渲染 效果 环境
3d-force-graph: ^1.73.3next: 14.1.3react: ^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 ./datatype Props {children?: React.ReactNode
}const ForceGraph3DOptions: ConfigOptions {}let _forceGraph3D: ForceGraph3DInstance | undefined undefined;
let _graph: ForceGraph3DInstance | undefined undefined;const ForceGraphW3D function (props: Props) {const containerRef useRefHTMLDivElement(null);const graphRef useRefHTMLDivElement(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;如果大家对其他实战实例感兴趣请在下面留言我会尽快更新。
