【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

实操

演示数据

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

  • 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;

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/516409.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

宁波ISO27001认证:信息安全管理的黄金标准

&#x1f603;宁波ISO27001认证&#xff1a;&#x1f916;信息安全管理的&#x1f4a1;黄金标准 随着信息技术&#x1f4bb;的迅猛发展&#xff0c;信息安全&#x1f50f;问题日益凸显&#xff0c;成为企业&#x1f3ec;稳定运营和持续发展的&#x1f4ca;关键因素。在这样&am…

C语言:文件操作(二)

目录 前言 4、文件的顺序读写 4.1fputc 4.2 fgetc 4.3 fputs 4.4 fgets 4.5 fprintf 4.6 fscanf 4.7 fread和fwrite 结&#xff08;二&#xff09; 前言 接者“C语言&#xff1a;文件操作&#xff08;一&#xff09;”往下讲。 本篇文章将介绍C语言的文件操作&#xf…

【算法每日一练]-数论(保姆级教程 篇1 埃氏筛,欧拉筛)

目录 保证给你讲透讲懂 第一种&#xff1a;埃氏筛法 第二种&#xff1a;欧拉筛法 题目&#xff1a;质数率 题目&#xff1a;不喜欢的数 思路&#xff1a; 问题&#xff1a;1~n 中筛选出所有素数&#xff08;质数&#xff09; 有两种经典的时间复杂度较低的筛法&#xff0…

靶向载药脂质体纳米药物载体应用领域

【中文名称】 载药脂质体 【纯 度】 95%以上 【保 存】 4℃保存 【溶 剂】 PBS或者水 【无菌处理】 是 【规 格】 50mg&#xff0c;10mg/ml 【品 牌】 碳水科技&#xff08;Tanshtech&#xff09; 载药脂质体是一种利用脂质双层囊泡包裹药物分子以实现有效…

计算机网络:数据链路层 - 可靠传输协议

计算机网络&#xff1a;数据链路层 - 可靠传输协议 可靠传输概念停止-等待协议 SW回退N帧协议 GBN选择重传协议 SR 可靠传输概念 如下所示&#xff0c;帧在传输过程中受到干扰&#xff0c;产生了误码。接收方的数据链路层&#xff0c;通过真伪中的真检验序列 FCS 字段的值&…

【Linux】-进程知识铺垫①计算机硬件的组织:冯诺依曼体系结构详细解读②关于操作系统对软硬件及用户的意义

目录 ​编辑 1.关于计算机的体系结构 1.1 冯诺依曼体系结构的诞生 2.冯诺依曼体系结构 2.1 cpu:运算器&#xff1a;更多的是让cpu具有特殊的数据计算功能&#xff1a; 2.2 控制器 2.3输入设备 2.4输出设备 3.计算机各个硬件设备之间的关系 4.内存与计算机效率 5.关于为什么总说…

Spoon Taking Problem(c++题解)

题目描述 &#xfffd;N 人が円卓に座っており&#xff0c;各人は反時計回りに順に 1, …, &#xfffd;1, …, N と番号付けられています&#xff0e;各人はそれぞれ左右どちらか一方の利き手を持っています&#xff0e; 円卓上には 1, …, &#xfffd;1, …, N と番号付け…

【Linux】详解动态库链接和加载对可执行程序底层的理解

一、动静态库链接的几种情况 如果我们同时提供动态库和静态库&#xff0c;gcc默认使用的是动态库。如果我们非要使用静态库&#xff0c;要加-static选项。如果我们只提供静态库&#xff0c;那可执行程序没办法&#xff0c;只能对该库进行静态链接&#xff0c;但程序不一定整体…

为移动云数据实现基于可撤销属性组的加密:多代理辅助方法

参考文献为2023年发表的Achieving Revocable Attribute Group-Based Encryption for Mobile Cloud Data: A Multi-Proxy Assisted Approach 动机 对于目前的代理辅助的可撤销基于属性加密来说&#xff0c;外包解密存一些缺点。当多个具有相同属性的用户请求外包转换时&#x…

核心API-Activiti7从入门到专家(3)

背景 今天的说的api&#xff0c;activiti7真有&#xff0c;但真不是这个&#xff1a; 这个是为了云服务&#xff0c;封装的一些api&#xff0c;以后我们还会逐步探讨&#xff0c;今天我们讨论的&#xff0c;是其真正的api&#xff0c;以前是这样的&#xff1a; 是的&#xff0…

ChatGPT 登陆报错:“Oops, an error occurred!” 如何解决?

ChatGPT登录时报错&#xff1a;“Oops, an error occurred!” 说明&#xff1a;哎呀&#xff0c;出错了! 原因&#xff1a; 目前出现这个情况的小伙伴&#xff0c;并非账号被封&#xff0c;多是服务端的问题&#xff0c;比如高峰段&#xff0c;服务端响应不及时&#xff0c;负…

[Apple Vision Pro]开源项目 Beautiful Things App Template

1. 技术框架概述&#xff1a; - Beautiful Things App Template是一个为visionOS设计的免费开源软件&#xff08;FOSS&#xff09;&#xff0c;用于展示3D模型画廊。 2. 定位&#xff1a; - 该模板作为Beautiful Things网站的延伸&#xff0c;旨在为Apple Vision Pro用户…

leetcode代码记录(打家劫舍 III

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 小偷又发现了一个新的可行窃的地区。这个地区只有一个入口&#xff0c;我们称之为 root 。 除了 root 之外&#xff0c;每栋房子有且只有一个“父“房子与之相连。一番侦察之后&#xf…

【数据结构】——二叉树的递归实现,看完不再害怕递归

创作不易&#xff0c;感谢三连加支持&#xff1f;&#xff01; 一 递归理解 递归无非就是相信它&#xff0c;只有你相信它&#xff0c;你才能写好递归&#xff01;为什么&#xff1f;请往下看 在进入二叉树的实现之前&#xff0c;我们得先理解一遍递归&#xff0c;可能很多…

通用开发技能系列:Authentication、OAuth、JWT 认证策略

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 通用开发技能系列 文章&#xff0c;主要对编程通用技能 Authentication、OAuth、JWT 认证策略 进行学习 1.Basic Authentication认证 每个请求都需要将 用户名密码 进行base64编码后&#xff0c;放在请求头的A…

网络基础二——TCP可靠性实现机制补充

11.3.4确认应答机制 ​ 1.双方通信时要返回确认应答报文&#xff0c;保证对方发送的报文是有效的&#xff1b;尽管整个通信过程中无法保证数据全部可靠&#xff0c;但是可以保证单个方向发送的数据是可靠的&#xff1b; ​ 发送的报文要设置序号&#xff0c;如果是应答报文要…

腾讯云容器与Serverless的融合:探索《2023技术实践精选集》中的创新实践

腾讯云容器与Serverless的融合&#xff1a;探索《2023技术实践精选集》中的创新实践 文章目录 腾讯云容器与Serverless的融合&#xff1a;探索《2023技术实践精选集》中的创新实践引言《2023腾讯云容器和函数计算技术实践精选集》整体评价特色亮点分析Serverless与Kubernetes的…

基于springboot实现校园资料分享平台系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现校园资料分享平台演示 摘要 随着信息互联网购物的飞速发展&#xff0c;国内放开了自媒体的政策&#xff0c;一般企业都开始开发属于自己内容分发平台的网站。本文介绍了校园资料分享平台的开发全过程。通过分析企业对于校园资料分享平台的需求&#xff0c;创…

设计模式总结-面向对象设计原则

面向对象设计原则 面向对象设计原则简介单一职责原则单一职责原则定义单一职责原则分析单一职责原则实例 开闭原则开闭原则定义开闭原则分析开闭原则实例 里氏代换原则里氏代换原则定义里氏代换原则分析 依赖倒转原则依赖倒转原则定义依赖倒转原则分析依赖倒转原则实例 接口隔离…

React 入门

一、官网地址 英文官网: https://reactjs.org/中文官网: https://react.docschina.org/ 二、React 特点 声明式编码组件化编码React Native 编写原生应用高效&#xff08;优秀的 Diffing 算法&#xff09;高效的原因&#xff1a;1.使用虚拟DOM&#xff0c;不总是直接操作页面…