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

news2024/11/24 17:30:46

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

  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、寄语

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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

年终奖,还得是腾讯。。。

腾讯年终奖 什么是真正的好公司? 一年到头,出不了几次裁员等劳务纠纷的吃瓜新闻。 只有到年底了,才因为年终奖远高于行业水平,实在没法低调了,"被迫"上热搜。 最近网友爆料了腾讯头牌部门的年终奖&#xff1…

GPT用来润色论文\生成完整长篇论文\进行AI绘图,真的太香了!

详情点击公众号:技术科研吧 链接:GPT用来润色论文\生成完整长篇论文\进行AI绘图,真的太香了! 一:AI领域最新技术 1.OpenAI新模型-GPT-5 2.谷歌新模型-Gemini Ultra 3.Meta新模型-LLama3 4.科大讯飞-星火认知 5.百…

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

运行环境 vs2022 c# cad2016 调试成功 一、引用 acdbmgd.dllacmgd.dllaccoremgd.dllAutodesk.AutoCAD.Interop.Common.dllAutodesk.AutoCAD.Interop.dll using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.T…

CICD注册和使用gitlab-runner常见问题

1、现象 fatal: unable to access https://github.com/homebrew/brew/: 2、解决 git config --global --unset http.proxy git config --global --unset https.proxy 查看gitlab-runner是否成功: userusers-MacBook-Pro ~ % gitlab-runner -h 查看gitlab-run…

C# .Net学习笔记—— 异步和多线程(异常处理)

一、异常处理 1、下面for循环20个线程&#xff0c;到11&#xff0c;12号的时候执行失败&#xff0c;这里我也用了try catch来捕获异常。 private void button11_Click(object sender, EventArgs e){TaskFactory taskFactory new TaskFactory();List<Task> taskList ne…

c语言:贪吃蛇的实现

目录 贪吃蛇实现的技术前提&#xff1a; Win32 API介绍 控制台程序&#xff08;console&#xff09; 控制台屏幕上的坐标 GetStdHandle GetConsoleCursorInfo CONSOLE_CURSOR_INFO SetConsoleCursorInfo SetConsoleCursorPosition GetAsyncKeyState 宽字符的打印 …

企业级大数据安全架构(九)FreeIPA管理员密码忘记后如何修改

作者&#xff1a;楼高 1重置Directory Server管理员密码 1.1停止directory server服务 [rootipa schema]# start-dirsrv HDP-HADOOP 如果你不知道你的实例名&#xff0c;可以通过如下方式获取 1.2生成一个新的HASH密码 停止服务后使用pwdhash命令生成一个新的HASH密码 [r…

计算机毕业设计 | springboot 高校新生报到系统(附源码)

1&#xff0c;绪论 1.1 开发背景 学校新生报到仅仅靠原始的手工管理&#xff0c;面对大量的新生信息&#xff0c;无法有效率地将其中的重要部分提取出来&#xff0c;并做出相应的判断和处理。学校的决策只能依据报表数据&#xff0c;在浪费大量人力、物力的同时无法做到实时监…

WorkPlus构建安全高效的内网通讯平台,助力企业内部协作

在现代企业中&#xff0c;高效的内部沟通和协作是团队成功的关键。而内网通讯软件成为了实现内部沟通和协作的首选工具。作为一款领先的内网通讯软件&#xff0c;WorkPlus以其卓越的性能和安全的特性&#xff0c;助力企业打造高效内部沟通与协作的新时代。 为何选择WorkPlus作为…

【51单片机】开发板和单片机的介绍(2)

前言 大家好吖&#xff0c;欢迎来到 YY 滴单片机系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过单片机的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…

Pandoc+Typora文件格式转换

前言 上一期写了一篇名为体验PicGoGitHubjsDelivr搭建免费图床的文章&#xff0c;介绍了如何用Github作为图床&#xff0c;并使用了jsDelivr提供的免费CDN加速&#xff0c;配合markdown来写文章本地使用起来还不错&#xff0c;但是在把.md格式文章上传其他平台的时候遇到了问题…

Apache POI与easyExcel:Excel文件导入导出的技术深度分析

在处理Excel文件时&#xff0c;Java开发者经常会面临多种选择&#xff0c;其中Apache POI和easyExcel是两个非常受欢迎的选择。这两个库都提供了强大的Excel文件处理功能&#xff0c;但在性能、内存使用、API设计以及扩展性方面有所不同。本文将深入分析Apache POI和easyExcel在…

【NTN 卫星通信】基于NTN的多3GPP连接应用场景

1 概述 同时聚合两条3GPP接入链路&#xff0c;其中一条为非地面网络&#xff0c;可以提供以下5G业务使能&#xff0c;尤其适用于带宽有限或接入链路不可靠的服务不足地区:   -扩展流动宽频   -超可靠的服务通信 如技术报告38.821所述&#xff0c;若干服务场景(例如在偏远地…

Spring AOP 常见错误(下)

上一章, 我们介绍了 Spring AOP 常遇到的几个问题&#xff0c;通过具体的源码解析&#xff0c;相信你对 Spring AOP 的基本原理已经有所了解了。不过&#xff0c;AOP 毕竟是 Spring 的核心功能之一&#xff0c;不可能规避那零散的两三个问题就一劳永逸了。所以这一章&#xff0…

OJ刷题:《剑指offer》之单身狗1、2 !(巧用位操作符,超详细讲解!)

目录 1.单身狗1 1.1 题目描述 1.2排序寻找 1.3巧用位操作符 2.单身狗2 1.1 题目描述 1.2排序寻找 1.3巧用位操作符 不是每个人都能做自己想做的事&#xff0c;成为自己想成为的人。 克心守己&#xff0c;律己则安&#xff01; 创作不易&#xff0c;宝子们&#xff01;如…

「悬浮捷径SoftCircle」安卓平台的hao123,一键打开万物

罗老师的onestep一步发布之前, 终端的打开形式还拘泥于桌面和负一屏 这种方式够简洁,但缺点明显: 1.入口单一性:只能在app首页和各种扫一扫之间选择和切换 2.操作复杂:入口切换需要频繁的进入退出桌面,步骤过于繁杂 以下是悬浮捷径SoftCircle的解决方式 1.入口的丰富性: 安卓平…

代码随想录算法训练营Day24 | 回溯理论基础、77.组合

回溯理论基础 回溯和递归是相辅相成的&#xff0c;只要有递归就有回溯&#xff08;执行完一次递归就自动回溯到上一层&#xff09; 回溯的效率 回溯不是一个高效的算法&#xff0c;而是一个纯暴力的过程 有些问题没有更好的解法&#xff0c;只能使用暴力搜索&#xff0c;这时…

okhttp 的 拦截器

拦截器有很多作用&#xff0c;实现就是责任链模式&#xff0c;细节&#xff0c;等我有时间补上。 后面有时间更新一下。 OkHttp最核心的工作是在 getResponseWithInterceptorChain() 中进行&#xff0c;在进入这个方法分析之前&#xff0c;我们先来了 解什么是责任链模式&…

基于Python的深度学习的身份证识别考勤系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

Sklearn、TensorFlow 与 Keras 机器学习实用指南第三版(九)

原文&#xff1a;Hands-On Machine Learning with Scikit-Learn, Keras, and TensorFlow 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 附录 A&#xff1a;机器学习项目清单 此清单可以指导您完成机器学习项目。有八个主要步骤&#xff1a; 构建问题并全局看问题。 …