当前位置: 首页 > news >正文

使用 Rough.js 创建动态水平条形图

Alt

本文由ScriptEcho平台提供技术支持

项目地址:传送门

使用 Rough.js 创建动态可视化网络图

应用场景

Rough.js 是一个 JavaScript 库,它允许开发人员使用毛边风格创建可视化效果。该库适用于各种应用程序,例如:

  • 数据可视化
  • 地图绘制
  • 用户界面设计
  • 艺术和插图

代码基本功能

本代码演示了如何使用 Rough.js 创建一个动态可视化网络图。网络图由节点和边组成,其中节点表示数据点,边表示节点之间的连接。该代码允许用户交互式地探索网络,缩放和拖动节点以查看连接和数据。

功能实现步骤

1. 加载必要的库

首先,代码加载了必要的库,包括 D3.js 和 Rough.js。D3.js 用于处理数据和创建可视化效果,而 Rough.js 用于创建毛边风格的效果。

import { onMounted } from 'vue'
import { Network } from 'rough-viz'
2. 创建节点和边

接下来,代码创建了网络图的节点和边。节点使用 createNodes 函数创建,该函数生成具有随机半径的节点。边使用 createLinks 函数创建,该函数生成连接相邻节点的边。

const createNodes = (numNodes) => {return d3.range(numNodes).map(() => {// ...})
}const createLinks = (numNodes) => {return d3.range(numNodes - 1).map((d, i) => ({// ...}))
}
3. 创建网络图

在加载库并创建数据之后,代码使用 Network 类创建了网络图。Network 类接受一个包含网络图配置的选项对象。

new Network({element: '#viz4',data: createNodes(20),links: createLinks(20),// ...
})
4. 配置网络图选项

Network 类允许用户配置各种选项,包括:

  • collision: 节点之间的最小距离
  • radiusExtent: 节点半径的范围
  • roughness: 毛边效果的粗糙度
  • fillStyle: 节点的填充样式
  • stroke: 节点的描边颜色
  • color: 节点的颜色
  • margin: 网络图周围的边距
5. 添加交互功能

代码还添加了交互功能,允许用户缩放和拖动节点。这使用 Vue.js 的 onMounted 钩子实现,该钩子在组件挂载时触发。

onMounted(async () => {// ...new Network({// ...})
})

关键代码分析

const loadJavascript = (jsUrl) => {return new Promise((resolve, reject) => {const script = document.createElement('script')// ...document.body.appendChild(script)})
}

此代码用于动态加载 JavaScript 库。它创建了一个 Promise,并在加载脚本后解析。

const createNodes = (numNodes) => {return d3.range(numNodes).map(() => {const randomValue = Math.random()// ...return {radius: multiplier * 5,}})
}

此代码创建具有随机半径的节点。multiplier 变量用于根据节点的随机值调整半径。

const createLinks = (numNodes) => {return d3.range(numNodes - 1).map((d, i) => ({source: i,target: i + 1,}))
}

此代码创建连接相邻节点的边。sourcetarget 属性指定边的源节点和目标节点。

总结与展望

开发这段代码是一个学习使用 Rough.js 创建动态可视化的过程。该代码可以扩展和优化,例如:

  • 添加对更多数据源的支持

  • 实现更复杂的交互功能,例如节点选择和过滤

  • 探索使用 Rough.js 的其他毛边效果和样式选项

    更多组件:



    获取更多Echos

    本文由ScriptEcho平台提供技术支持

    项目地址:传送门

    扫码加入AI生成前端微信讨论群:

扫码加入群聊

相关文章:

使用 Rough.js 创建动态水平条形图

本文由ScriptEcho平台提供技术支持 项目地址:传送门 使用 Rough.js 创建动态可视化网络图 应用场景 Rough.js 是一个 JavaScript 库,它允许开发人员使用毛边风格创建可视化效果。该库适用于各种应用程序,例如: 数据可视化地图…...

Python教程(十):面向对象编程(OOP)

目录 专栏列表前言一、面向对象编程概述1.1 类和对象1.2 继承1.3 多态1.4 封装 二、Python 中的类和对象2.1 定义类2.2 __init__ 函数解释2.3 创建对象 三、继承3.1 基本继承3.2 创建子类对象 四、多态五、封装六. 访问限制七、综合实例结语 专栏列表 Python教程(一…...

CTFHUB-文件上传-文件头检查

开启题目 1.php内容&#xff1a; <?php eval($_POST[cmd]);?> 截屏截一个很小很小的图片&#xff0c;保存为 png 格式&#xff0c;把 1.png 和 1.php 放在同一文件夹&#xff0c;在此目录打开 cmd&#xff0c; 使用以下命令把 1.png 和 1.php 合成为图片马 copy 1.pn…...

c语言数组与指针,字符串与指针,指向函数的指针,malloca动态内存分配

数组与指针 数组: - 数组是一种数据结构&#xff0c;可以存储固定大小的一组相同类型的元素。在内存中&#xff0c;数组的元素是连续存储的。 指针: - 指针是一个变量&#xff0c;用于存储内存地址。指针本身占用内存&#xff0c;用来指向某个数据的地址。 数组与指针的关系…...

代码随想录算法训练营day30 | 452. 用最少数量的箭引爆气球 、435. 无重叠区间、763.划分字母区间

碎碎念&#xff1a;加油 参考&#xff1a;代码随想录 452. 用最少数量的箭引爆气球 题目链接 452. 用最少数量的箭引爆气球 思想 局部最优&#xff1a; 让重叠的气球尽量在一起&#xff0c;用一支弓箭射。 全局最优&#xff1a; 用最少数量的箭引爆气球。 首先对气球进行排…...

如何手动修复DLL丢失?2种手动修复dll文件方法

DLL&#xff08;动态链接库&#xff09;文件是Windows操作系统中非常重要的组成部分&#xff0c;它们包含了程序运行所需的代码和数据。然而&#xff0c;由于各种原因&#xff0c;如系统更新、软件卸载不当或病毒感染&#xff0c;DLL文件有时会丢失或损坏&#xff0c;导致程序无…...

Node.js(2)——压缩前端html

需求&#xff1a;把回车符&#xff08;\r&#xff09;和换行符&#xff08;\n&#xff09;去掉后&#xff0c;写入到新的html文件中 步骤&#xff1a; 读取源html文件内容正则替换字符串写入到新的html文件中 示例&#xff1a; 获取html文件中的内容并检查&#xff08;同时…...

堆的实现-向上调整算法-向下调整算法-堆排序-TopK问题 C语言

堆的实现与堆排序及TopK问题的C语言代码 下面是详细的堆实现&#xff0c;包括向上调整、向下调整算法&#xff0c;以及堆排序和解决TopK问题的完整C语言示例代码。 1. 堆的实现 首先&#xff0c;定义堆的数据结构&#xff1a; #include <stdio.h> #include <stdli…...

【C++BFS】1466. 重新规划路线

本文涉及知识点 CBFS算法 LeetCode1466. 重新规划路线 n 座城市&#xff0c;从 0 到 n-1 编号&#xff0c;其间共有 n-1 条路线。因此&#xff0c;要想在两座不同城市之间旅行只有唯一一条路线可供选择&#xff08;路线网形成一颗树&#xff09;。去年&#xff0c;交通运输部…...

服务器并发模型

服务器&#xff1a; 单循环服务器&#xff1a;服务器在同一时刻只能响应一个客户端的请求 并发服务器模型&#xff1a;服务器在同一时刻可以响应多个客户端的请求 UDP:无连接 TCP:有连接 1.多进程 资源空间消耗大 效率低 2.多线程 相…...

Chapter 23 数据可视化——地图

欢迎大家订阅【Python从入门到精通】专栏&#xff0c;一起探索Python的无限可能&#xff01; 文章目录 前言一、基础绘图二、视觉映射三、案例分析 前言 随着地理信息系统&#xff08;GIS&#xff09;技术的迅猛发展和大数据时代的到来&#xff0c;数据可视化已经成为分析和理…...

Linux笔记 --- 组合数据类型

结构体 简单的定义结构体的方法 struct student {char name;int age;float score; };//使用student模板创建两个结构体变量 struct student Jack,Rose; 结构体中可以存放除了函数以外的任何数据类型的数据&#xff0c;在创建结构体时student被称为结构体模板名称&#xff0c;…...

DaoCloud-Dockfile文件NGINX文件

Dockfile文件 安装依赖&#xff0c;打包&#xff0c;配置NGINX代理&#xff0c;最后把打完的包复制到服务器相应的文件夹下&#xff0c;构建镜像成功。 # syntax docker/dockerfile:experimental FROM xx.xx.xx.xx/public/node:16.14.2 as builder# LABEL maintainer"e…...

耳机行业中MIC ENC

0 Preface/Foreword ENC&#xff1a; Environment Noise Cancellation&#xff0c;环境降噪&#xff0c;主要指在通话过程中&#xff0c;戴着ENC通话降噪耳机的使用者&#xff0c;即使在嘈杂的环境&#xff0c;比如在嘈杂的街区&#xff0c;开着窗运行的汽车上&#xff0c;说话…...

python-自动化办公-Excel-Openpyxl

Python处理Excel数据之Openpyxl 1.1 Openpyxl库的安装使用 openpyxl模块是一个读写Excel 2010文档的 Python 库&#xff0c;如果要处理更早格式的Excel文档&#xff0c;需要用到额外的库&#xff0c;openpyxl是一个比较综合的工具&#xff0c;能够同时读取和修改Excel文档。其…...

图形编辑器基于Paper.js教程10:导入导出svg,导入导出json数据

深入了解Paper.js&#xff1a;实现SVG和JSON的导入导出功能 Paper.js是一款强大的矢量绘图JavaScript库&#xff0c;非常适合用于复杂的图形处理和交互式网页应用。本文将详细介绍如何在Paper.js项目中实现SVG和JSON格式的导入导出功能&#xff0c;这对于开发动态图形编辑器等…...

[STM32][Bootloader][教程]STM32 HAL库 Bootloader开发和测试教程

0. 项目移植 对于不想知道其执行过程的朋友来说&#xff0c;可以直接移植&#xff0c;我的板子是STM32F411CER6, 512K M4内核 项目地址&#xff1a; Bootloader&#xff08;可以自己写标志位用于自测&#xff0c;项目中这部分代码已经被注释&#xff0c;可以打开自行测试&…...

如何手写一个SpringBoot框架

你好&#xff0c;我是柳岸花开。 在这篇文章中&#xff0c;我们将手写模拟SpringBoot的核心流程&#xff0c;让大家能够以一种简单的方式了解SpringBoot的大概工作原理。 项目结构 我们创建一个工程&#xff0c;包含两个模块&#xff1a; springboot模块&#xff0c;表示Spring…...

vite解决前端跨域步骤

Vite 解决跨域问题的原理主要是通过其内置的开发服务器功能实现的&#xff0c;具体来说&#xff0c;是通过 HTTP 代理&#xff08;HTTP Proxy&#xff09;机制。在开发环境中&#xff0c;Vite 服务器可以配置为一个代理服务器&#xff0c;将前端应用发出的请求转发到实际的后端…...

同步交互与异步交互:深入解析与选择

同步交互与异步交互&#xff1a;深入解析与选择 1、同步交互2、异步交互3、选择策略 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在软件开发的世界里&#xff0c;交互方式主要分为两大类&#xff1a;同步与异步。下面是对这两种方式的解…...

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...