01-通过纯js理解数据驱动图表概念
现有1组一维数组数据：
const data = [720, 320, 531, 120, 230, 387, 258]
通过forEach循环该data，根据数据值，循环出对应长度的 rect 标签，计算好横纵坐标的位置，并在最后将各个 rect标签 append 到 svg 标签中。如图所示，在浏览器中的坐标原点在左上角，向右为x轴正方向，向下为y轴正方向，由于不需要考虑y轴的反向计算，横向柱图的生成会比竖向柱图的生成更加简单。
竖向柱图的生成思路如下：
data.forEach((d, i) => {const rectTag = document.createElementNS('http://www.w3.org/2000/svg', 'rect')rectTag.setAttribute('x', (i * (barWidth + barPad)))rectTag.setAttribute('y', (maxHeight - d / maxValue * maxHeight) + 24)rectTag.setAttribute('width', barWidth)rectTag.setAttribute('height', (d / maxValue * maxHeight))todaySvg.append(rectTag)
})【完整代码】
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><main><h1>Chart</h1><svg width="900" height="200"></svg></main><script text="script">const data = [720, 320, 531, 120, 230, 387, 258]const todaySvg = document.querySelector('svg')const barWidth = 24const barPad = 12const maxHeight = 112const maxValue = Math.max(...data)data.forEach((d, i) => {const rectTag = document.createElementNS('http://www.w3.org/2000/svg', 'rect')rectTag.setAttribute('x', (i * (barWidth + barPad)))rectTag.setAttribute('y', (maxHeight - d / maxValue * maxHeight) + 24)rectTag.setAttribute('width', barWidth)rectTag.setAttribute('height', (d / maxValue * maxHeight))todaySvg.append(rectTag)})</script></body></html>【注】先理解好如何通过数组的forEach来生成不同的svg元素（将图表的思路重心放在data上），能够更好地理解D3.js的原理及其使用。
相关文章：
01-通过纯js理解数据驱动图表概念
现有1组一维数组数据： const data [720, 320, 531, 120, 230, 387, 258] 通过forEach循环该data，根据数据值，循环出对应长度的 rect 标签，计算好横纵坐标的位置，并在最后将各个 rect标签 append 到 svg 标签中。如图所…...
Java DTO 深度解析
一、什么是DTO？ DTO（Data Transfer Object） 是一种用于在不同层（如Controller层、Service层）之间传输数据的对象设计模式。其核心目的是封装数据，减少网络传输开销，同时避免直接暴露领域模型&a…...
Python、Pytorch、TensorFlow、Anconda、PySide、Jupyter
一、Python Python是一种高级、通用、解释型的开源编程语言，由Guido van Rossum于1990年代初设计。它具有以下显著特点： 1.语言特性 (1) 语法简洁易读，接近自然语言（如print(“Hello World!”)） (2) 采用强制缩进而非大括号定义代码块 (3) 支持面向对象、函数式和过…...
视频监控联网系统GB28181协议中互联结构详解
文章目录 4.1 SIP 监控域互联结构4.1.1 概述4.1.2 区域内联网4.1.3 跨区域联网4.1.4 联网方式4.1.4.1 级联4.1.4.2 互联 4.2 SIP 监控域与非 SIP 监控域互联结构4.2.1 概述4.2.2 控制协议网关4.2.3 媒体网关 智联视频超融合平台介绍 4.1 SIP 监控域互联结构 4.1.1 概述 联网系…...
系统编程的标准IO
标准IO 头文件需求： #include <stdio.h>1.fopen和fclose (1)fopen fopen的函数功能是打开一个文件。 首先看看fopen的函数声明： FILE *fopen(const char *path, const char *mode);第一个参数path是文件地址，传入的是不可变的字符…...
windows安装WS，实测可行
参考链接 1、 wsl -l -v 查看哪些ubuntu环境在运行 2、wsl -t Ubuntu 停止当前的Ubuntu 3、wsl --install -d Ubuntu-22.04 下载ubunt 4、wsl --unregister Ubuntu-22.04 移除ubuntu 5、wsl --export Ubuntu-22.04 F:\Ubuntu-22.04\Ubuntu-22.04.tar 导出 Ubuntu-22.04 为 .ta…...
【蓝桥杯真题精讲】第 16 届 Python A 组（省赛）
文章目录 T1 偏蓝 (5/5)T2 IPv6 (0/5)T3 2025 图形 (10/10)T4 最大数字 (10/10)T5 倒水 (15/15)T6 拼好数 (0/15)T7 登山 (20/20)T8 原料采购 (20/20) 更好的阅读体验 高速访问：https://wiki.dwj601.cn/ds-and-algo/lan-qiao-cup/16th-python-a/永久链接࿱…...
栈和队列的模拟实现
栈和队列的模拟实现 容器适配器priority_queue(优先级队列）priority_queue的使用priority_queue的模拟实现： 仿函数什么叫仿函数？需要自己实现仿函数的情况： 栈的模拟实现队列的模拟实现deque（vector和list的缝合怪&am…...
python学习day3
1比较运算符号（生成布尔类型） print(98大于90吗,98>90) print(98小于90吗,98<90) print(98等于90吗,9890) print(98不等于90吗,98!90)2逻辑运算符号 print(8>7 and 6>5) print(9>8 and 7<5) print(8<7 and 10/0) #当第一个表达式结…...
Java转Go日记（四十二）：错误处理
1.1.1. 错误处理 执行任何操作后，如果发生任何错误，GORM将其设置为*DB的Error字段 if err : db.Where("name ?", "jinzhu").First(&user).Error; err ! nil {// 错误处理...}// 如果有多个错误发生，用GetErrors获…...
考研系列-408真题计算机组成原理篇（2020-2023）
写在前面 此文章是本人在备考过程中408真题计算机组成原理部分（2020年-2023年）的易错题及相应的知识点整理，后期复习也常常用到，对于知识提炼归纳理解起到了很大的作用，分享出来希望帮助到大家~ # 2020年 1.机器字长相关 指令字长和机器字长没有明确的关系，但是一般来说…...
经典面试题：TCP 三次握手、四次挥手详解
在网络通信的复杂架构里，“三次握手”与“四次挥手”仿若一座无形的桥梁，它们是连接客户端与服务器的关键纽带。这座“桥梁”不仅确保了连接的稳固建立，还保障了连接的有序结束，使得网络世界中的信息能够顺畅、准确地流动。 在面…...
Raft算法学习（1）博士论文大纲
参考资料 原文一共257页，其中前六章为算法重点介绍，第七章有点像A/B TEST 论文标题： 共识：连接理论与实践 (CONSENSUS: BRIDGING THEORY AND PRACTICE) 作者： Diego Ongaro 日期： 2014年8月 机构ÿ…...
PDF处理控件Aspose.PDF教程：以编程方式将 PDF 导出为 JPG
在本节中，我们将探讨如何使用 Aspose.PDF 库将 PDF 文档转换为 JPG 图像。Aspose.PDF 是一个功能强大且用途广泛的库，专为需要以编程方式处理 PDF 文件的开发人员而设计。它提供了丰富的功能，可用于跨多个平台创建、编辑和转换 PDF 文档。其主…...
记录一下flutter项目自己封窗的弹窗
在评委项目开发中我使用到的弹窗dialog与modal sheet底部弹出组件，我对其进行了基础的封装，以适用于本项目，代码如下： class JudgeDialog {// 内容边距static EdgeInsetsGeometry _contentPadding(String? content) {return c…...
计算机网络基础概念
网络通信的本质就是进程间通信。我们日常使用的聊天软件、在线视频软件等，事实上都是本机客户端进程与远地服务端进程之间进行网络通信所实现的。我们与朋友进行远程聊天，本质上是从本地客户端将聊天内容发送给服务端，再由服务端转发给目标客…...
【原创】ubuntu22.04下载编译AOSP 15
repo init -u http://mirrors.tuna.tsinghua.edu.cn/git/AOSP/platform/manifest -b master source build/envsetup.sh lunch aosp_cf_x86_64_phone-trunk_staging-userdebug find ./ -name “index.lock” -exec rm -f {} ; find ./ -name “index.lock” -exec rm -i {} ;…...
鸿蒙PC新物种发布！华为MateBook Pro/ Fold深度解析：折叠屏革命与生态破局
华为在5月19日发布会上推出的两款鸿蒙电脑新品——华为MateBook Pro和HUAWEI MateBook Fold 非凡大师，标志着其在PC领域的深度布局和技术突破。结合发布会信息和行业背景，以下为分析及影响预测： 一、产品核心亮点及创新 华为MateBook Pro&…...
数据要素如何重构人力资本升级
一、数字经济时代 在传统工厂车间，老师傅的经验智慧曾是企业最宝贵的资产。而在现代的数字化办公室，每天产生的千万条数据流正在重塑企业创新规则。这个变革的核心密码锁定在两个关键维度：人力资本结构的质变与创新资源的智配。 数据要素与…...
【爬虫】12306自动化购票
上文： 【爬虫】12306查票-CSDN博客 下面是简单的自动化进行抢票，只写到预定票，没有写完登陆， 跳出登陆后与上述代码同理修改即可。 感觉xpath最简单，复制粘贴： 还有很多写法： 官网地址&#…...
保密行业工作沟通安全：吱吱软件的“四重防泄露”设计
“工作沟通安全威胁是指在金融、科技、医疗等保密行业中，错发、泄露、窃取一条消息或者一份文件，都有可能引发数据安全灾难性失控。以往的即时通讯软件仅依赖单一的加密手段，无法满足保密行业从发送、传输到接受全链路加密的更高规格的数据安…...
2001-2023年上市公司管理讨论与分析文本数据（MDA文本数据）
2001-2023年上市公司管理讨论与分析文本数据（MD&A文本数据） 1、时间：2001-2023年 2、来源：上市公司年报 3、格式：txt 4、样本量：6W 5、说明：“管理层讨论与分析”（MANAGEME…...
Unity3D仿星露谷物语开发46之种植/砍伐橡树
1、目标 种植一棵橡树，从种子变成大树。 然后可以使用斧头砍伐橡树。 2、删除totalGrowthDays字段 修改growthDays的含义，定义每个值为到达当前阶段的累加天数。此时最后一个阶段就是totalGrowthDays的含义。所以就可以删除totalGrowthDays字段。 &…...
9-社区动态（Stack布局）
涉及知识点: stack布局 video组件 3.组件状态控制： State、Prop以及Link装饰器 组件状态控制：Observed&ObjectLink装饰器 课时: 2 1 任务 1.1 需求 完成社区动态功能，社区动态显示用户发布的跟游戏相关的短视频，自动循环…...
如何使用MATLAB NLP工具箱进行文本聚类
文章目录 前言一、核心流程与代码实现二、高级聚类技术三、评估聚类质量四、实战案例：新闻聚类五、优化技巧与注意事项 前言 在 MATLAB 中使用 NLP 工具箱进行文本聚类主要分为数据预处理、特征提取、相似度计算、聚类算法应用和结果分析五个核心步骤。以下是详细教…...
deepseek梳理java高级开发工程师es面试题
Elasticsearch 面试题及答案（高级 Java 开发工程师版） 基础概念 1. 解释 Elasticsearch 中的倒排索引是什么？为什么它比传统数据库更适合全文搜索？ 答案： 倒排索引是一种将文档中的词项(token)映射到包含该词项的文…...
查看mysql配置文件my.cnf的位置
3.删除mysql相关文件 想要完全卸载mysql，不仅要卸载应用，配置文件及相关文件也需要一一清除，还原环境配置，减少一些麻烦。 sudo rm -rf /usr/local/mysql sudo rm -rf /etc/my.cnf sudo rm -rf /var/db/mysql sudo rm -rf /var/…...
PyTorch进阶实战指南：01自定义神经网络组件开发
PyTorch进阶实战指南：01自定义神经网络组件开发 前言 在深度学习领域，PyTorch凭借其动态计算图和灵活的模块化设计，已成为学术研究和技术落地的首选框架之一。本文聚焦于神经网络组件的自定义开发，旨在帮助开发者突破现成模型的限…...
【MySQL】04.数据类型
首先我们来看一下数据类型分类： 我们接下来对红色标识的进行介绍，其他的自行了解即可。 1. 数值类型 1.1 bit 我们以bit为例来介绍整型。 mysql> create table test_bit(-> sex bit(1)-> ); mysql> desc test_bit; -----------------…...
MCP专题 | 探索MCP服务器世界：增强AI能力的精选推荐
在人工智能快速发展的今天，模型上下文协议（MCP，Model Context Protocol）已成为一项重要的技术标准，它使AI模型能够安全地与外部资源交互。MCP服务器作为AI与工具、数据库和API之间的桥梁，极大地扩展了AI的功…...
深入解析OrientDB：多模型数据库的技术优势与实际应用
OrientDB 是一款开源的多模型 NoSQL 数据库，融合了文档数据库、图数据库和对象数据库的特性。它不仅支持灵活的数据建模，还提供了高性能的查询能力，适用于社交网络、物联网、内容管理等场景。本文详细探讨 OrientDB 的核心特性、应用场景&…...
芯片分享之AD976性能介绍
产品特征： D976和AD976A均为高速、低功耗、16位模数转换器(ADC)，采用5 V单电源供电。AD976A的吞吐速率为200 ksps，而AD976的吞吐速率为100 ksps。各器件均内置一个逐次逼近型开关电容ADC、一个2.5 V内部基准电压源和一个高速并行接口。最大功…...
)
Flutter - 集成三方库:数据库(sqflite)
数据库 $ flutter pub add sqlite $ flutter pub get$ flutter run运行失败，看是编译报错,打开Xcode工程 ⌘ B 编译 对比 GSYGithubAppFlutter 的Xcode工程Build Phases > [CP] Embed Pods Frameworks 有sqfite.framework。本地默认的Flutter工程默认未生成Pod…...
从零实现用MobileFaceNet算法进行实时人脸识别（三）用yolov5-face算法实现人脸检测)
野火鲁班猫(arrch64架构debian)从零实现用MobileFaceNet算法进行实时人脸识别（三）用yolov5-face算法实现人脸检测
环境直接使用第一篇中安装好的环境即可 先clone yolov5-face项目 git clone https://github.com/deepcam-cn/yolov5-face.git 并下载预训练权重文件yolov5n-face.pt 网盘链接: https://pan.baidu.com/s/1xsYns6cyB84aPDgXB7sNDQ 提取码: lw9j （野火官方提供&am…...
基于matlabcd7.x的无网格近似方法
无网格近似方法（Meshless Methods）是一类数值计算方法，用于解决偏微分方程（PDEs）问题，特别是在几何形状复杂或需要动态网格更新的场景中。与传统的有限元方法（FEM）相比，无…...
塔式服务器都有哪些重要功能？
塔式服务器作为一种拥有着独特立式设计的服务器，能够帮助企业节省一定的放置空间，提供一系列的功能和优势，可以运用在多种应用场景当中，下面将探讨一下塔式服务器的主要功能都有哪些？ 塔式服务器可以支持基本的应用程序…...
【基于SpringBoot的图书购买系统】深度讲解 分页查询用户信息，分析前后端交互的原理
引言📚 在企业级应用开发中，用户管理系统是几乎所有后台管理系统的核心模块之一。它不仅需要实现用户数据的增删改查，还需要考虑数据分页展示、状态管理、前后端交互效率等问题。本文将以一个实际的用户管理系统为例，详细讲解基于…...
机器学习算法-聚类K-Means
先来看看K-Means算法的核心流程吧 下面我们通过一个简单聚类来介绍K-Means算法迭代过程 如图(a)所示：表示初始化数据集。 如图(b)所示：假设K2，随机选择两个点作为类别质心，分别为图中的红色和蓝色质心。 如图©所示ÿ…...
初识Linux 进程：进程创建、终止与进程地址空间
目录 0.写在前面 1.进程创建 fork()： exec()： 2.进程地址空间 3.进程终止 正常终止（主动退出） 异常终止（被动终止） 0.写在前面 本文将对Linux环境下的进程：包括进程创建、终止与进程等待…...
2025年PMP 学习二十二 15章 项目绩效域
2025年PMP 学习二十二 15章 项目绩效域 文章目录 2025年PMP 学习二十二 15章 项目绩效域项目绩效域1.项目绩效域2.项目持续效域3.项目管理中的干系人管理 1.干系人持续效域促进干系人参与的步骤： 2 团队持续效域1 团队持续效域及项目团队人员有关系的活动和职能&…...
顶级流媒体服务商 Spotify 2025.04 故障复盘报告，吃他人的堑长自己的智
2025 年 4 月 16 日，Spotify 经历了一次影响全球用户的中断。以下就是发生了什么以及我们将如何解决它。 背景 我们使用 Envoy Proxy 作为我们的网络外围系统。外围是我们的软件接收用户（您！）网络流量的第一部分。然后ÿ…...
服装收银系统哪个好？服装店进销存管理软件全面评测
在服装批发零售行业，选择一款合适的收银系统和进销存管理软件至关重要。好的系统不仅能提高工作效率，还能帮助商家精准掌握库存、优化销售策略。 本文将全面分析服装收银系统的选择标准，并重点介绍秦丝进销存这一专业解决方案。 一、服装收…...
Java程序员从0学AI（二）
一、前言 在上一篇文章中，我们初步认识了 AI 领域的核心基础概念，如大语言模型（LLM）的参数量特征、提示词（Prompt）对交互效果的关键作用、文本处理单元 Token 的独特定义，以及通过向量转换实现…...
)
进阶知识：无参的函数装饰器之深入理解@wraps()
进阶知识：无参的函数装饰器之深入理解wraps(func) 一、wraps(func)的本质解析 1.1 核心作用 wraps(func)是functools模块提供的装饰器工具，用于保留被装饰函数的元信息。它通过将被装饰函数的名称（__name__）、文档字符串&#…...
《C 语言 sizeof 与 strlen 深度对比：原理、差异与实战陷阱》
目录 一. sizeof 和 strlen 的对比 1.1 sizeof 1.2 strlen 1.3 对比表格 二. 数组和指针笔试题解析 2.1 一维数组 2.2 字符数组 2.2.1 代码练习一 2.2.2 代码练习二 2.2.3 代码练习三 2.2.4 代码练习四 2.2.5 代码练习五 2.2.6 代码练习六 2.3 二维数组 …...
C++ 初阶 | 类和对象易错知识点（上）
目录 0.引言 1.访问限定符 2.域 3.类的实例化和声明 4.this指针 5.构造函数（自动执行） 6.拷贝构造 7.运算符重载 8.日期类的实现 9.总结 0.引言 今天，小邓儿和大家分享一下，C在类和对象中的易错知识点🤭&am…...
USB转TTL
USB转TTL模块是实现计算机USB接口与TTL电平串口设备（如单片机、嵌入式系统）通信的核心组件，其原理涉及协议转换和电平适配两大关键技术 一、核心功能与应用场景 功能：将计算机的USB信号（高速差分信号、USB协议&#…...
汽车生产中的测试台连接 – EtherCAT 转CANopen高效的网关通信
使用 EtherCAT 和 CANopen协议，实现对汽车零部件的高效生产线末端测试 某电动机、电桥和变速箱制造商之一，正在其生产线上使用ETHERCAT转canopen网关WL-ECAT-COP的解决方案。集成到测试线中的下线测试必须映射众多待测设备的测试应用。该制造商已指定 Et…...
汽车充电过程中--各个电压的关系（DeepSeek）
在电动汽车的充电过程中，电池的充电机制涉及多个电压参数的协调控制，以下从原理到实际应用逐步分析： 1. 充电基础原理 电动汽车电池（通常为锂离子电池组）的充电本质是通过外部电源向电池注入电能，使锂离子…...
基于HTML的Word风格编辑器实现：从零打造功能完备的富文本编辑器
引言 在Web开发中，实现一个功能完备的富文本编辑器是一个常见需求。本文将基于HTML5和JavaScript，结合第三方库，打造一个具有Word风格界面的富文本编辑器，支持格式设置、图片插入、表格创建、文件导入导出等核心功能。 完整代码…...