3D力导向树插件-3d-force-graph学习002

一、实现效果:节点+文字同时展示

  1. 节点显示不同颜色
  2. 节点盒label文字并存
  3. 节点上添加点击事件

在这里插入图片描述


二、利用插件:CSS2DRenderer

提示:以下引入文件均可在安装完3d-force-graph的安装包里找到
在这里插入图片描述


三、关键代码

提示:模拟数据可按如下格式填充

// gData数据格式如下
let gData = {
	 "nodes": [
	    {"id": "Myriel", "group": 1},
	    {"id": "Napoleon", "group": 1}
	 ],
	 "links": [
	    {"source": "Napoleon", "target": "Myriel", "value": 1},
	    {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8}
	  ]
}
initBlockJson(){
	const Graph = ForceGraph3D()
			(document.getElementById('3d-graph'))
	      .nodeAutoColorBy('user')
	      .nodeLabel(node => `${node.user}: ${node.description}`)
	      .onNodeClick(node => window.open(`https://bl.ocks.org/${node.user}/${node.id}`, '_blank'))
		.graphData(gData);

}

4、寄语

花未全开月未圆
半山微醉尽余欢
何需多虑盈亏事
终归小满胜万全

在这里插入图片描述

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

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

相关文章

笔记---容斥原理

AcWing,890.能被整除的数 给定一个整数 n n n 和 m m m 个不同的质数 p 1 , p 2 , … , p m p_{1},p_{2},…,p_{m} p1​,p2​,…,pm​。 请你求出 1 ∼ n 1∼n 1∼n 中能被 p 1 , p 2 , … , p m p_{1},p_{2},…,p_{m} p1​,p2​,…,pm​ 中的至少一个数整除的整数有多少…

SemiDrive E3 MCAL 开发系列(1) – 环境搭建

一、 概述 本文将会介绍 SemiDrive E3 系列 MCU 的MCAL 开发环境搭建,包括如何获取及安装 EB 和 MCAL,E3 Gateway 开发板介绍,MCAL 工程的编译、下载等。 二、 EB 和 MCAL 的获取及安装 2.1 软件获取 EB Tresos 是用于进行 MCAL 配置…

Android Split APK介绍

文章目录 Split APKSplit APK 详细介绍概念Android App Bundle(AAB)Split APK 的优势动态分发减小安装包大小模块化和渠道分发 Split APK 的类型基于屏幕密度### 基于 CPU 架构基于语言 实现 Split APK Split APK Split APK 是 Android 中一种应用程序安…

【测试运维】web自动化全知识点笔记第1篇:什么是Web自动化测试(已分享,附代码)

本系列文章md笔记(已分享)主要讨论Web自动化测试相关知识。了解什么是自动化,理解什么是自动化测试以及为什么要使用自动化测试。具体包含:WebDriver的基本操作,WebDriver的鼠标、键盘操作,下拉选择框、警告…

2024.2.4日总结(小程序开发1)

小程序开发和普通网页开发的区别 运行环境不同 网页运行在浏览器环境中,小程序运行在微信环境中 API不同 由于运行的环境不同,所以小程序中无法调用DCM和BOM的API,但是可以调用微信环境提供的各种API,如:地理定位&…

Python 数据分析(PYDA)第三版(一)

原文:wesmckinney.com/book/ 译者:飞龙 协议:CC BY-NC-SA 4.0 关于开放版本 第 3 版的《Python 数据分析》现在作为“开放获取”HTML 版本在此网站wesmckinney.com/book上提供,除了通常的印刷和电子书格式。该版本最初于 2022 年…

微服务基础(持续更新中)

安装SSH以及虚拟机,Centos具体步骤见 https://b11et3un53m.feishu.cn/wiki/FJAnwOhpIihMkLkOKQocdWZ7nUc

vulhub中Adminer ElasticSearch 和 ClickHouse 错误页面SSRF漏洞复现(CVE-2021-21311)

Adminer是一个PHP编写的开源数据库管理工具,支持MySQL、MariaDB、PostgreSQL、SQLite、MS SQL、Oracle、Elasticsearch、MongoDB等数据库。 在其4.0.0到4.7.9版本之间,连接 ElasticSearch 和 ClickHouse 数据库时存在一处服务端请求伪造漏洞&#xff08…

202416读书笔记|《总有人会拥抱满身带刺的你》——今天我请客,想请你快乐

202416读书笔记|《总有人会拥抱满身带刺的你》——今天我请客,想请你快乐 这是一篇暖萌轻松的绘本推荐记录书评,《总有人会拥抱满身带刺的你》纳米著,《今天我请客,想请你快乐》燕七著,都还不错,截取摘录了…

从搜索引擎到答案引擎:LLM驱动的变革

在过去的几周里,我一直在思考和起草这篇文章,认为谷歌搜索正处于被颠覆的边缘,它实际上可能会影响 SEO 作为业务牵引渠道的可行性。 考虑到谷歌二十多年来的完全统治地位,以及任何竞争对手都完全无力削弱它,坦率地说&…

解析 JavaScript 异步编程:从回调地狱到 Promise 和 Async/Await

在现代的JavaScript开发中,处理异步任务变得愈发重要,因为它们允许我们在等待I/O、网络请求或定时器等事件时继续执行其他任务,以提高程序的性能和响应能力。本文将介绍JavaScript中异步编程的演变过程,从最初的回调地狱到后来的P…

【数据结构与算法】(9)基础数据结构 之 阻塞队列的单锁实现、双锁实现详细代码示例讲解

目录 2.8 阻塞队列1) 单锁实现2) 双锁实现 2.8 阻塞队列 之前的队列在很多场景下都不能很好地工作,例如 大部分场景要求分离向队列放入(生产者)、从队列拿出(消费者)两个角色、它们得由不同的线程来担当,…

使用绿联私有云Docker搭建自动化实时网页监控工具,实现降价提醒/RSS监控等

使用绿联私有云Docker搭建自动化实时网页监控工具,实现降价提醒/RSS监控等 哈喽小伙伴们好,我是Stark-C~ 之前老是有小伙伴们在评论区说我分享的Docker容器都是通过Docker run命令部署的,能不能照顾下像绿联私有云这种新势力NAS的新手用户&…

C# CAD界面-自定义工具栏(三)

运行环境 vs2022 c# cad2016 调试成功 一、引用 二、开发代码进行详细的说明 初始化与获取AutoCAD核心对象: Database db HostApplicationServices.WorkingDatabase;:这行代码获取当前工作中的AutoCAD数据库对象。在AutoCAD中,所有图形数…

【Git】01 Git介绍与安装

文章目录 一、版本控制系统二、Git三、Windows安装Git3.1 下载Git3.2 安装3.3 检查 四、Linux安装Git4.1 YUM安装4.2 源码安装 五、配置Git5.1 配置用户名和邮箱5.2 配置级别5.3 查看配置 六、总结 一、版本控制系统 版本控制系统,Version Control System&#xff…

【消息队列】kafka整理

kafka整理 整理kafka基本知识供回顾。

基于NSGA-II的深度迁移学习

深度迁移学习 迁移学习是一种机器学习技术,它允许一个预训练的模型被用作起点,在此基础上进行微调以适应新的任务或数据。其核心思想是利用从一个任务中学到的知识来帮助解决另一个相关的任务,即使这两个任务的数据分布不完全相同。这种方法…

vulnhub靶场之Thales

一.环境搭建 1.靶场描述 Description : Open your eyes and change your perspective includes 2 flags:user.txt and root.txt. Telegram: machineboy141 (for any hint) This works better with VIrtualBox rathe than VMware 2.靶场地址 https://www.vulnhub.com/entry/t…

年假作业3.0

1、选择题 BCDAA 2、填空题 15,27 15 11,10,13,12 3、改错题 1.缺少了要使用的命名空间&#xff0c;应在加上#include <iostream>的下一行添加using namespace std&#xff0c;void main(){}报错&#xff0c;C语言中main函数必须返回int改为&#xff1a;int main(…

海康IPC摄像机接入国标平台,发现一直不在线(离线)的处理方式

目 录 一、问题 二、问题分析 &#xff08;一&#xff09;常见设备离线问题的原因 &#xff08;二&#xff09;原因分析 三、问题查处 &#xff08;一&#xff09;设备端排查故障&#xff08;设备端自查&#xff09; 1、检查GB28181参数配置是否有误 2、…