D3.js
d3是用于数据可视化 可用于处理数据、创建图表、实现动画效果和交互功能
应用场景:
- 数据可视:将复杂的数据以图表的形式展示出来,便于用户理解和分析。
- 交互式图:支持事件处理和动画效果,提升用户体验。
- 仪表盘和报:广泛应用于仪表盘、报告等场景,帮助用户实时监控和分析数据。
- 地理可视:提供丰富的地理投影功能,用于创建地图和地理可视
d3官网
d3
绘制三角形
<template><svg ref="svgRef" width="200" height="200"></svg>
</template><script setup>
import { onMounted, ref } from 'vue';
import * as d3 from 'd3';const svgRef = ref(null);onMounted(() => {const svg = d3.select(svgRef.value);// 创建三角形的路径const trianglePath = "M100 0 L200 200 L0 200 Z";// 绘制三角形svg.append('path').attr('d', trianglePath).attr('fill', 'steelblue');
});
</script><style>
/* 样式可以根据需要添加,这里仅为了展示三角形 */
svg {border: 1px solid #000;
}
</style>
绘制圆
<template><div ref="d3Container"></div>
</template><script setup>
import { onMounted, ref } from 'vue';
import * as d3 from 'd3';const d3Container = ref(null);onMounted(() => {const svg = d3.select(d3Container.value).append('svg').attr('width', 200).attr('height', 200);const circle = svg.append('circle').attr('cx', 100).attr('cy', 100).attr('r', 50).style('fill', 'blue');
});
</script><style>
/* 可以添加一些样式 */
</style>
绘制不同值以柱状图形显示
<template><div ref="d3Container"></div>
</template><script setup>
import { onMounted, ref } from 'vue';
import * as d3 from 'd3';const d3Container = ref(null);onMounted(() => {const dataset = [12, 31, 20, 17, 25, 18, 15];const svg = d3.select(d3Container.value).append('svg').attr('width', 500).attr('height', 100);svg.selectAll('rect').data(dataset).join('rect').attr('x', (d, i) => i * 70).attr('y', d => 100 - d).attr('width', 60).attr('height', d => d).attr('fill', 'blue');
});
</script><style>
/* 样式内容 */
</style>
d3+dagre-d3 画流程图
npm install --save d3 dagre-d3
<template><div style="border: 1px solid #ccc; padding: 20px; width: 600px"><svg class="dagre" width="600" height="600"><g class="container"></g></svg><div ref="tooltip" class="tooltip"><div>节点ID:{{currentNode.id}}</div><div>节点名称:{{currentNode.nodeName}}</div></div></div>
</template><script>import dagreD3 from 'dagre-d3';import * as d3 from 'd3';export default {name: 'dagre',props: {tableList: {type: Array,default: []}},data() {return {currentNode: {id: null,nodeName: '',},// nodes: [],edges: [],indexObj: {},nodes: [{id: 0,nodeName: "A",shape: "rect"},{id: 1,nodeName: "B",shape: "diamond"},{id: 2,nodeName: "C",shape: "rect"},{id: 3,nodeName: "D",shape: "rect"},{id: 4,nodeName: "E",shape: "rect"},{id: 5,nodeName: "F",shape: "rect"}],edges: [{start: 0,end: 1,label: "哈哈"},{start: 1,end: 2,label: ""},{start: 1,end: 3,label: ""},{start: 2,end: 4,label: ""},{start: 3,end: 5,label: ""},{start: 4,end: 5,label: ""}],};},mounted() {// 把表格的数据转成节点和线条this.changeData();// this.draw();},methods: {async changeData() {// 给每个节点设置对应的编号this.tableList.map((v, i) => {this.indexObj[v.name] = i;});await this.tableList.map(async (v, i) => {// 点this.nodes.push({id: i,nodeName: v.name,shape: "rect"});// 线let arr = await this.getLine(v);this.edges = this.edges.concat(arr);});this.draw();},getLine(node) {let brr = [];if (node.pre.length) {if (node.pre.length === 1) {brr.push({start: this.indexObj[node.pre[0]],end: this.indexObj[node.name],label: ""});} else {node.pre.map(v => {brr.push({start: this.indexObj[v],end: this.indexObj[node.name],label: ""});});}}return brr;},// 绘制简单的流程图draw() {// 创建 Graph 对象const g = new dagreD3.graphlib.Graph().setGraph({rankdir: 'LR', // 流程图从下向上显示,默认'TB',可取值'TB'、'BT'、'LR'、'RL'}).setDefaultEdgeLabel(function () {return {};});// Graph添加节点this.nodes.forEach(node => {g.setNode(node.id, {id: node.id,label: node.nodeName,shape: node.shape, //节点形状,可以设置rect(长方形),circle,ellipse(椭圆),diamond(菱形) 四种形状,还可以使用render.shapes()自定义形状style: 'fill:#fff;stroke:#70baff', //节点样式,可设置节点的颜色填充、节点边框 fill:#61b2e4;stroke:#ffflabelStyle: 'fill: #000;font-weight:bold', //节点标签样式, 可设置节点标签的文本样式(颜色、粗细、大小)fill: #fff;font-weight:boldrx: 5, // 设置圆角ry: 5, // 设置圆角paddingBottom: 15,paddingLeft: 20,paddingRight: 20,paddingTop: 15,});});// Graph添加节点之间的连线if (this.nodes.length > 1) {this.edges.forEach(edge => {g.setEdge(edge.start, edge.end, {label: edge.label, //边标签style: 'stroke: #70baff; fill: none; stroke-width: 2px', // 连线样式arrowheadStyle: 'fill: #70baff;stroke: #70baff;', //箭头样式,可以设置箭头颜色arrowhead: 'normal', //箭头形状,可以设置 normal,vee,undirected 三种样式,默认为 normal})});}// 获取要绘制流程图的绘图容器const container = d3.select('svg.dagre').select('g.container');// 创建渲染器const render = new dagreD3.render();// 在绘图容器上运行渲染器绘制流程图render(container, g);// 拖拽缩放const svg = d3.select('svg.dagre');let zoom = d3.zoom().scaleExtent([0.5, 2]).on('zoom', current => {container.attr('transform', current.transform);});svg.call(zoom);// 鼠标悬停显示隐藏tooltipconst that = this;const tooltipBox = that.$refs.tooltip;container.on('mouseover', e => {if (e.target.nodeName === "rect") {that.currentNode = that.nodes.filter(item => item.id === Number(e.target.__data__))[0];tooltipBox.style.display = 'block';tooltipBox.style.top = e.clientY + 20 + 'px';tooltipBox.style.left = e.clientX + 'px';// 点击某个节点,修改节点样式,再次点击恢复原来的样式// if(e.target.style.fill === "rgb(97, 178, 228)") { e.target.style = "fill:#877ee1;stroke:#fff"; } // else { e.target.style = "fill:#61b2e4;stroke:#fff"; }}}).on('mouseout', function () {tooltipBox.style.display = 'none';})},},};</script><style scoped>.tooltip {position: absolute;font-size: 12px;background-color: white;border-radius: 3px;box-shadow: rgb(174, 174, 174) 0px 0px 10px;cursor: pointer;display: none;padding: 10px;}.tooltip>div {padding: 10px;}</style>
相关文章:
D3.js
d3是用于数据可视化 可用于处理数据、创建图表、实现动画效果和交互功能应用场景: 数据可视:将复杂的数据以图表的形式展示出来,便于用户理解和分析。交互式图:支持事件处理和动画效果,提升用户体验。仪表盘和报:广泛…...
Windows onnxruntime编译openvino
理论上来说,可以直接访问 ONNXRuntime Releases 下载 dll 文件,然后从官方文档中下载缺少的头文件以直接调用,但我没有尝试过。 1. 下载 OpenVINO 包 从官网下载 OpenVINO 的安装包并放置在 C:\Program Files (x86) 路径下,例如…...
Python中的sqlite3模块:SQLite数据库接口详解
Python中的sqlite3模块:SQLite数据库接口详解 主要功能sqlite3.connect(database)connection.cursor()cursor.execute(sql)connection.commit()cursor.fetchall()connection.close() 使用示例执行结果总结 在Python中,sqlite3模块提供了一个与SQLite数据…...
Unity功能模块一对话系统(4)实现个性文本标签
本期我们将了解如何在TMPro中自定义我们的标签样式,并实现两种有趣的效果。 一.需求描述 1.定义<float>格式的标签,实现标签处延迟打印功能 2.定义<r" "></r>格式的标签,实现标签区间内文本片段的注释显示功能…...
Vue.js前端框架教程15:Vue父子组件之间的通信ref、emits
文章目录 1. 属性传递(Props)2. 事件监听( Emits)3. `ref` 引用4. `provide` 和 `inject`5. 插槽(Slots)在 Vue 3 中,父子组件之间的通信可以通过多种方式实现,包括属性传递、事件监听、插槽以及 ref 和 provide/inject。以下是这些通信方式的详解: 1. 属性传递(Pro…...
Python 实现 冒泡排序算法示例
冒泡排序算法示例 冒泡排序(Bubble Sort)是一种简单的排序算法。它重复地遍历要排序的列表,比较相邻的元素,并交换它们的位置,如果它们的顺序错误。这个过程会重复进行,直到没有需要交换的元素为止&#x…...
《机器学习》--线性回归模型详解
线性回归模型是机器学习中的一种重要算法,以下是对其的详细解释: 一、定义与原理 线性回归(Linear Regression)是利用数理统计中回归分析,来确定两种或两种以上变量间相互依赖的定量关系的一种统计分析方法。线性回归…...
Django项目部署到服务器
文章目录 django项目部署到服务器在服务器上安装Django和依赖:项目代码上传配置数据库收集静态文件配置Web服务器配置Gunicorn(WSGI服务器)启动/停止/重载systemd服务。 django项目部署到服务器 在服务器上安装Django和依赖: su…...
CSDN编辑器
这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…...
如何免费解锁 IPhone 网络
您是否担心 iPhone 上的网络锁定?如果您的 iPhone 被锁定到特定运营商,解锁它可以连接到不同的运营商。好吧,我们为您准备了一份指南。 iPhone运营商免费解锁将是小菜一碟。在我们的解锁运营商 iphone 免费指南中。我们为您提供了一份简介&am…...
Trimble天宝X9三维扫描仪为建筑外墙检测提供了全新的解决方案【沪敖3D】
随着城市化进程的快速推进,城市高层建筑不断增多,对建筑质量的要求也在不断提高。建筑外墙检测,如平整度和垂直度检测,是衡量建筑质量的重要指标之一。传统人工检测方法不仅操作繁琐、效率低下,还难以全面反映墙体的真…...
微服务のGeteWay
目录 概念: 三大核心: 工作流程: 9527网关如何做路由映射: GetWay高级特性: 按服务名动态路由服务: 断言Route Predicate Factories : 获取当前时区时间: After Route &…...
Golang 中 Goroutine 的调度
Golang 中 Goroutine 的调度 Golang 中的 Goroutine 是一种轻量级的线程,由 Go 运行时(runtime)自动管理。Goroutine 的调度基于 M:N 模型,即多个 Goroutine 可以映射到多个操作系统线程上执行。以下是详细的调度过程和策略&…...
MyBatis使用的设计模式
目录 1. 工厂模式(Factory Pattern) 2. 单例模式(Singleton Pattern) 3. 代理模式(Proxy Pattern) 4. 装饰器模式(Decorator Pattern) 5. 观察者模式(Observer Patt…...
淺談Cocos2djs逆向
前言 簡單聊一下cocos2djs手遊的逆向,有任何相關想法歡迎和我討論^^ 一些概念 列出一些個人認為比較有用的概念: Cocos遊戲的兩大開發工具分別是CocosCreator和CocosStudio,區別是前者是cocos2djs專用的開發工具,後者則是coco…...
选择器(结构伪类选择器,伪元素选择器),PxCook软件,盒子模型
结构为类选择器 伪元素选择器 PxCook 盒子模型 (内外边距,边框) 内外边距合并,塌陷问题 元素溢出 圆角 阴影: 模糊半径:越大越模糊,也就是越柔和 案例一:产品卡片 <!DOCTYPE html> <html lang&q…...
CentOS 7系统 OpenSSH和OpenSSL版本升级指南
文章目录 CentOS 7系统 OpenSSH和OpenSSL版本升级指南环境说明当前系统版本当前组件版本 现存安全漏洞升级目标版本升级准备工作OpenSSL升级步骤1. 下载和解压2. 编译安装3. 配置环境 OpenSSH升级步骤1. 下载和解压2. 编译安装3. 创建systemd服务配置4. 更新SSH配置文件5. 设置…...
使用 Comparable 和 Comparator 接口对集合排序
使用 Comparable 和 Comparator 接口对集合排序: 1. 使用 Comparable 接口: 当你希望一个类的对象能够按照某种自然顺序进行排序时,可以实现 Comparable 接口 并重写 compareTo() 方法。 实现步骤: 1.1 实现 Comparable<T&g…...
最新常见的图数据库对比,选型,架构,性能对比
图数据库排名 地址:https://db-engines.com/en/ranking/graphdbms 知识图谱查询语言 SPARQL、Cypher、Gremlin、PGQL 和 G-CORE 语法 / 语义 / 特性 SPARQL Cypher Gremlin PGQL G-CORE 图模式匹配查询 语法 CGP CGP CGP(无可选)1 CGP CGP 语义 子…...
混合合并两个pdf文件
混合两个pdf 1、在线免费交替和混合奇数和偶数PDF页面2、有什么软件把两个 PDF 交叉合并?3、pdfsam本地合并 如何Google翻译的原文和译文合并,(沉浸式翻译效果相对较好) 1、在线免费交替和混合奇数和偶数PDF页面 https://deftpd…...
OpenCV-Python实战(9)——滤波降噪
一、均值滤波器 cv2.blur() img cv2.blur(src*,ksize*,anchor*,borderType*)img:目标图像。 src:原始图像。 ksize:滤波核大小,(width,height)。 anchor:滤波核锚点,…...
uniapp——微信小程序读取bin文件,解析文件的数据内容(三)
微信小程序读取bin文件内容 读取用户选择bin文件,并解析数据内容,分包发送给蓝牙设备; 文章目录 微信小程序读取bin文件内容读取文件读取内容返回格式 API文档: getFileSystemManager 关于App端读取bin文件,请查看&…...
Python 中常用的算法
1. 排序算法 用于将数据按特定顺序排列。 冒泡排序(Bubble Sort)选择排序(Selection Sort)插入排序(Insertion Sort)快速排序(Quick Sort)归并排序(Merge Sort…...
xadmin后台首页增加一个导入数据按钮
xadmin后台首页增加一个导入数据按钮 效果 流程 1、在添加小组件中添加一个html页面 2、写入html代码 3、在urls.py添加导入数据路由 4、在views.py中添加响应函数html代码 <!DOCTYPE html> <html lang...
Kubernetes: NetworkPolicy 的实践应用
一、Network Policy 是什么,在云原生领域有和作用 Network Policy 是 Kubernetes 官方提出来的一种网络策略的规范,用户通过编写符合对应规范的规则来控制 k8s 集群内 L3 和 L4 层的网络流量。 NetworkPolicy 主要的功能就是实现在云原生领域的容器网络管控它给用…...
计算机体系结构期末复习3:GPU架构及控制流问题
目录 一、GPU设计思路 1.简化流水线、增加核数 2.单指令多线程(SIMT) 3.同时驻留大量线程 4.总思路:多线程单指令多线程 二、GPU的控制流问题 1.什么是控制流问题 2.怎么应对分支分歧 一、GPU设计思路 1.简化流水线、增加核数 2.单指…...
excel怎么删除右边无限列(亲测有效)
excel怎么删除右边无限列(亲测有效) 网上很多只用第1步的,删除了根本没用,还是存在,但是隐藏后取消隐藏却是可以的。 找到右边要删除的列的第一个空白列,选中整个列按“ctrlshift>(向右的小箭头)”&am…...
ChatGPT-4助力学术论文提升文章逻辑、优化句式与扩充内容等应用技巧解析。附提示词案例
目录 1.扩写(expansion/paraphrasing) 2.优化(optimization) 3.缩写(optimization) 4.提取关键词(keyword extraction) 5.短语转换(phrase transformationÿ…...
C++和OpenGL实现3D游戏编程【连载19】——着色器光照初步(平行光和光照贴图)(附源码)
1、本节要实现的内容 我们在前期的教程中,讨论了在即时渲染模式下的光照内容。但在我们后期使用着色器的核心模式下,会经常在着色器中使光照,我们这里就讨论一下着色器光照效果,以及光照贴图效果,同时这里知识会为后期的更多光照效果做一些铺垫。本节我们首先讨论冯氏光照…...
html+css网页制作 美食 美食网5个页面
htmlcss网页制作 美食 美食网5个页面 网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作)。 获取源码 1࿰…...
Mac 12.1安装tiger-vnc问题-routines:CRYPTO_internal:bad key length
背景:因为某些原因需要从本地mac连接远程linxu桌面查看一些内容,必须使用桌面查看,所以ssh无法满足,所以决定安装vnc客户端。 问题: 在mac上通过 brew install tiger-vnc命令安装, 但是报错如下: > D…...
遥感图像车辆检测-目标检测数据集
遥感图像车辆检测-目标检测数据集(包括VOC格式、YOLO格式) 数据集: 链接: https://pan.baidu.com/s/1XVlRTVWpXZFi6ZL_Xcs7Rg?pwdaa6g 提取码: aa6g 数据集信息介绍: 共有 1035 张图像和一一对应的标注文件 标注文件格式提供了…...
51c自动驾驶~合集43
我自己的原文哦~ https://blog.51cto.com/whaosoft/12930230 #ChatDyn 上交大最新ChatDyn:一句话操纵三维动态 理解和生成真实的三维虚拟世界是空间智能的核心。所生成的三维虚拟世界能够为自动驾驶、具身智能等AI系统提供高质量闭环仿真训练场,高效…...
随机变量是一个函数-如何理解
文章目录 一. 随机变量二. 随机变量是一个函数-栗子(一对一)1. 掷骰子的随机变量2. 掷骰子的随机变量(求点数平方)3. 抛硬币的随机变量4. 学生考试得分的随机变量 三. 随机变量是一个函数-理解(多对一) 一. 随机变量 随机变量就是定义在样本空间上的函数…...
云计算在医疗行业的应用
云计算在医疗行业的应用广泛而深入,为医疗服务带来了前所未有的变革。以下是对云计算在医疗行业应用的详细解析: ### 一、医疗数据共享与整合 云计算平台具有强大的数据存储和处理能力,使得医疗数据共享与整合成为可能。通过云计算平台&…...
Cursor提示词
你是一位经验丰富的项目经理,对于用户每一次提出的问题,都不急于编写代码,更多是通过深思熱虑、结构化的推理以产生高质量的回答,探索更多的可能方案,并从中寻找最佳方案。 约束 代码必须可以通过编译回答尽量使用中…...
C++ 设计模式:单例模式(Singleton Pattern)
链接:C 设计模式 链接:C 设计模式 - 享元模式 单例模式(Singleton Pattern)是创建型设计模式,它确保一个类只有一个实例,并提供一个全局访问点来访问这个实例。单例模式在需要全局共享资源或控制实例数量的…...
C++中生成0到180之间的随机数
在C中生成0到180之间的随机数,可以使用标准库中的和头文件。提供了rand()函数来生成随机数,而提供了time()函数来设置随机数生成的种子。这样每次运行程序时,生成的随机数序列都会不同。 以下是一个简单的示例代码,展示了如何生成…...
[.闲于修.]Autosar_UDS_笔记篇_ISO14229-1
前言:闲来无事,摸鱼无趣,准备细读一下14229,记录一些容易被忽略掉的内容 正文:(以下数字代表章节) 7、Application layer protocol 7.5.6 多个并发请求消息 常见的服务器实现在服务器中只有一…...
如何利用云计算进行灾难恢复?
云计算环境下的灾难恢复实践指南 天有不测风云,企业的IT系统也一样,我见过太多因为没有做好灾备而吃大亏的案例。今天就和大家聊聊如何用云计算来做灾难恢复。 一个惊心动魄的真实案例:某电商平台的主数据中心因为市政施工不小心挖断了光纤…...
Redis - 1 ( 7000 字 Redis 入门级教程 )
一: Redis 1.1 Redis 简介 Redis 是一种基于键值对(key-value)的 NoSQL 数据库,与其他键值对数据库不同,Redis 的值可以是多种数据结构和算法的组合,如字符串(string)、哈希&#…...
[羊城杯 2024]不一样的数据库_2
题目描述: 压缩包6 (1).zip需要解压密码: 尝试用ARCHPR工具爆破一下: (字典可自行在github上查找) 解压密码为:753951 解压得到13.png和Kee.kdbx文件: 二维码图片看上去只缺了正常的三个角&…...
租赁系统的数字化转型与高效管理新模式分析
内容概要 在当今瞬息万变的市场环境中,租赁系统的数字化转型显得尤为重要。信息技术的迅猛发展不仅改变了我们的生活方式,也迫使企业重新审视其运营模式。为了顺应这一潮流,租赁系统亟需通过高效管理新模式来提升运营效率,从而保…...
Selenium+Java(21):Jenkins发送邮件报错Not sent to the following valid addresses解决方案
问题现象 小月妹妹近期在做RobotFrameWork自动化测试,并且使用Jenkins发送测试邮件的时候,发现报错Not sent to the following valid addresses,明明各个配置项看起来都没有问题,但是一到邮件发送环节,就是发送不出去,而且还不提示太多有用的信息,急的妹妹脸都红了,于…...
【每日学点鸿蒙知识】文字识别、快捷登录、输入法按钮监听、IDE自动换行、资产访问等
【每日学点鸿蒙知识】24.09.07 1、API使用: hms.ai.ocr.textRecognition(文字识别)? 需要接入API文档https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/core-vision-text-recognition-api-V5中的文字识别…...
LabVIEW化工实验室设备故障实时监测
化工实验室中,各类设备的运行状态直接影响实验的精度与安全性。特别是重要分析仪器的突发故障,可能导致实验中断或数据失效。为了实现设备运行状态的实时监控与故障快速响应,本文提出了一套基于LabVIEW的解决方案,通过多参数采集、…...
小程序学习05——uniapp路由和菜单配置
目录 一、路由 二、如何管理页面及路由? 三、pages.json 页面路由 四、 tabBar 一、路由 路由:在前端,往往指代用不同地址请求不同页面,决定了用户如何在应用的不同页面之间导航。 菜单:对于每个路径(…...
漏洞分析 | Apache Struts文件上传漏洞(CVE-2024-53677)
漏洞概述 Apache Struts是美国阿帕奇(Apache)基金会的一个开源项目,是一套用于创建企业级Java Web应用的开源MVC框架。 近期,网宿安全演武实验室监测到Apache Struts在特定条件下,存在文件上传漏洞(网宿评…...
【VBA】EXCEL - VBA 遍历工作表的 5 种方法,以及注意事项
目录 1. 遍历单列数据并赋值 2. 遍历整个工作表的数据区域并赋值 3. 遍历指定范围的数据并赋值 4. 遍历多列数据并赋值 5. 遍历所有工作表中的数据并赋值 注意事项: 1. 遍历单列数据并赋值 Sub UpdateColumnData()Dim ws As WorksheetSet ws ThisWorkbook.S…...
CSS浮动
浮动 可以让块级元素待在一行,紧挨着,没有空格 float:left 浮动的元素会脱离正常的文档系统,像浮云一样飘起来浮动元素后面的正常元素会自动补位浮动元素会被父元素的宽高所束缚,所以不算完全的脱离文档流当浮动元素…...