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

「数据可视化 D3系列」入门第四章：DOM操作与元素管理

news 来源：原创 2025/8/26 7:41:48

DOM操作与元素管理

- 核心技能：元素选择与操作
- 一、元素选择：精准定位DOM节点
- - 基础选择方法对比
  - 进阶选择技巧
- 二、元素插入：动态构建DOM结构
- - append() vs insert()
  - 实际应用示例
- 三、元素删除：优雅移除DOM节点
- - 删除操作最佳实践
- 四、内容修改：动态更新元素
- - text()与html()对比
  - 内容更新模式
- 五、属性操作：全面控制元素特性
- - attr()与property()对比
  - 属性操作实战
- 六、类名管理：灵活控制样式
- - classed()方法深度应用
- 七、实战演练
- 小结
- 下章预告：**绘制第一个D3图表**

核心技能：元素选择与操作

本章将深入探讨D3.js中元素的选择、插入、删除和修改等核心操作，为后续图表绘制打下坚实基础。

一、元素选择：精准定位DOM节点

基础选择方法对比

方法	返回内容	示例
`select()`	匹配的第一个元素	`d3.select("#chart")`
`selectAll()`	所有匹配的元素	`d3.selectAll(".bar")`

进阶选择技巧

// 属性选择器
d3.select("[data-type='column']");  // 选择data-type为column的元素
d3.selectAll("[width>100]");        // 选择width大于100的元素// 层级选择
d3.select("body").select(".chart-container")      // 在body内选择.chart-container.selectAll(".data-point");       // 在其内部选择所有.data-point// 函数式选择
const dataset = [10, 20, 30, 40];
d3.selectAll("circle").filter((d, i) => i % 2 === 0)  // 选择偶数索引的元素.style("fill", "red");

二、元素插入：动态构建DOM结构

append() vs insert()

方法	插入位置	示例
`append()`	选择集末尾	`selection.append("div").classed("box")`
`insert()`	指定元素前或指定位置	`selection.insert("span", ":first-child")`

实际应用示例

// 创建SVG画布的标准方式
const svg = d3.select("body").append("svg").attr("width", 500).attr("height", 300);// 在特定位置插入图例
svg.insert("g", ":first-child")  // 在所有元素前插入.attr("class", "legend");// 批量创建柱状图
const bars = svg.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar").attr("x", (d, i) => i * 30).attr("y", d => height - d * 5);

三、元素删除：优雅移除DOM节点

删除操作最佳实践

// 简单删除
d3.select(".outdated").remove();// 带过渡动画的删除
d3.selectAll(".temp-element").transition().duration(500).style("opacity", 0).remove();// 条件删除
d3.selectAll("circle").filter(d => d.value < 0)  // 删除值为负的元素.remove();

四、内容修改：动态更新元素

text()与html()对比

方法	处理方式	示例
`text()`	纯文本内容	`.text(d => d.name)`
`html()`	解析HTML标签	`.html(d =>` ${d}`)`

内容更新模式

// 简单文本更新
d3.select("#title").text("最新数据可视化");// 带格式的HTML内容
d3.select("#tooltip").html(`<div class="tooltip-header">${data.name}</div><div class="tooltip-value">${data.value} 单位</div>`);// 基于数据的动态内容
d3.selectAll(".data-label").data(dataset).text((d, i) => `第${i+1}项: ${d}%`);

五、属性操作：全面控制元素特性

attr()与property()对比

方法	适用场景	示例
`attr()`	HTML/SVG属性	`.attr("fill", "steelblue")`
`property()`	DOM对象属性	`.property("checked", true)`

属性操作实战

// SVG元素属性设置
svg.selectAll("circle").attr("cx", d => xScale(d.date)).attr("cy", d => yScale(d.value)).attr("r", 5);// 表单元素属性
d3.select("#toggle").property("disabled", false);// 批量设置自定义属性
d3.selectAll(".node").attr("data-value", d => d).attr("data-index", (d, i) => i);

六、类名管理：灵活控制样式

classed()方法深度应用

// 添加/移除类
d3.select("#alert").classed("active", true);  // 添加active类
d3.select("#notification").classed("hidden", false);  // 移除hidden类// 切换类（toggle）
function toggleHighlight() {d3.select(this).classed("highlight", !d3.select(this).classed("highlight"));
}// 多类名操作
d3.select("#complex-element").classed("chart-axis chart-grid", true).classed("old-version", false);// 基于数据的类名设置
d3.selectAll(".temperature").classed("high-temp", d => d > 30).classed("low-temp", d => d < 10);

七、实战演练

👇 示例：动态数据表格

<!DOCTYPE html>
<html>
<head><script src="https://d3js.org/d3.v7.min.js"></script><style>table { border-collapse: collapse; margin: 20px; }th, td { border: 1px solid #ddd; padding: 8px; }th { background-color: #f2f2f2; }.highlight { background-color: #ffe0b2; }.updated { animation: pulse 1s; }@keyframes pulse {0% { background-color: #fff; }50% { background-color: #c8e6c9; }100% { background-color: #fff; }}</style>
</head>
<body><button id="update-btn">更新数据</button><div id="table-container"></div><script>// 初始数据let dataset = [{ id: 1, product: "笔记本", sales: 120, stock: 45 },{ id: 2, product: "手机", sales: 85, stock: 32 },{ id: 3, product: "平板", sales: 60, stock: 18 }];// 创建表格函数function renderTable(data) {// 选择或创建表格let table = d3.select("#table-container").selectAll("table").data([null]) // 使用单元素数组确保只有一个表格.join("table"); // join = enter + update + exit// 处理表头let thead = table.selectAll("thead").data([null]).join("thead");thead.selectAll("tr").data([null]).join("tr").selectAll("th").data(["ID", "产品", "销量", "库存"]).join("th").text(d => d);// 处理表格内容let tbody = table.selectAll("tbody").data([null]).join("tbody");let rows = tbody.selectAll("tr").data(data, d => d.id); // 使用ID作为键// 进入+更新部分let rowsEnter = rows.join(enter => enter.append("tr").attr("class", "new-row"),update => update.attr("class", "updated").call(update => update.transition().duration(1000).attr("class", null)),exit => exit.remove());// 单元格处理rowsEnter.selectAll("td").data(d => [d.id, d.product, d.sales, d.stock]).join("td").text(d => d).style("color", (d, i) => i === 2 && d > 100 ? "red" : null);}// 初始渲染renderTable(dataset);// 更新数据d3.select("#update-btn").on("click", function() {// 生成随机新数据dataset = dataset.map(item => ({...item,sales: Math.max(0, item.sales + Math.floor(Math.random() * 40 - 20)),stock: Math.max(0, item.stock - Math.floor(Math.random() * 10))}));// 随机添加/删除数据if (Math.random() > 0.7 && dataset.length < 5) {const newId = Math.max(...dataset.map(d => d.id)) + 1;dataset.push({id: newId,product: ["显示器", "键盘", "鼠标"][Math.floor(Math.random() * 3)],sales: Math.floor(Math.random() * 100),stock: Math.floor(Math.random() * 50)});} else if (Math.random() > 0.7 && dataset.length > 2) {dataset.splice(Math.floor(Math.random() * dataset.length), 1);}renderTable(dataset);});</script>
</body>
</html>

小结

精准选择是D3操作的基础
- select()匹配的第一个元素
- selectAll()所有匹配的元素
动态插入构建可视化结构
- append()在末尾添加
- insert()在指定位置添加
优雅删除多余元素
- 配合过渡动画提升用户体验
- 使用条件过滤精准控制
内容与属性动态更新
- 区分text()和html()的使用场景
  - text()纯文本内容
  - html()解析HTML标签
- 理解attr()与property()的区别
  - attr()HTML/SVG属性
  - property()DOM对象属性
类名管理实现样式控制
- 使用classed()灵活添加/移除类
- 基于数据动态设置类名

下章预告：绘制第一个D3图表

SVG基础与D3绘图流程
柱状图的完整实现
比例尺与坐标轴的运用

「数据可视化 D3系列」入门第四章：DOM操作与元素管理

DOM操作与元素管理核心技能：元素选择与操作一、元素选择：精准定位DOM节点基础选择方法对比进阶选择技巧二、元素插入：动态构建DOM结构append() vs insert()实际应用示例三、元素删除：优雅移除DOM节点删除操作最佳实践四、内容…...

编程日记 2025/8/26 7:41:48

突发重磅消息！！！CVE项目将被取消？

突发重磅消息！！！CVE项目将被取消？突发！来自可靠消息来源。MITRE 对 CVE 项目的支持将于明天到期。附件信件已发送给 CVE 董事会成员。https://mp.weixin.qq.com/s/N3qkiHaDfzDuBMK3JbBCjw...

编程日记 2025/8/26 7:41:00

基于uniapp的鸿蒙APP大数据量性能优化

文章目录一、问题诊断与性能瓶颈分析1.1 大数据场景下的典型性能问题1.2 性能监测工具使用1.2.1 HBuilderX内置分析器1.2.2 鸿蒙DevEco工具链1.2.3 自制性能埋点二、数据加载优化方案2.1 分页加载实现（带错误重试机制）2.2 数据流优化策略2.2.1 数据压缩…...

编程日记 2025/8/25 17:00:53

【算法】归并排序

算法系列七：归并排序一、归并排序的递归探寻 1.思路 2.搭建 2.1设计过掉不符情况（在最底层时） 2.2查验能实现基础排序（在最底层往上点时） 2.3跳转结果继续往上回搭 3.实质 4.实现二、递归的调用栈 1.递归的…...

编程日记 2025/8/25 14:59:18

【JavaScript】二十三、M端事件 + 轮播图Swiper插件

文章目录 1、M端事件2、swiper插件2.1 插件2.2 轮播图插件Swiper的使用 3、案例：学生信息表 1、M端事件移动端有一个独有的事件：触屏事件 touch(也称触摸事件)，Android 和 IOS 都有，touch 对象代表一个触摸点。触摸点可能是一根…...

编程日记 2025/8/22 7:59:22

【Spring】DI（依赖注入）详解：属性注入@Autowired（超详细）、构造方法注入、Setter注入

1.DI（依赖注入）介绍 1.1DI是什么？ DI（Dependency Injection，依赖注入） 是 Spring 框架中实现 IoC（控制反转）的一种核心机制。如果说 IoC 是一种设计思想，告诉我们“把控…...

编程日记 2025/8/24 20:14:22

Spring Boot 中配置 Redis 连接池的详细

目录一、添加依赖二、配置 Redis 连接池（一）通过 Java 配置类（二）通过 application.properties 文件三、测试 Redis 操作四、总结一、添加依赖在 pom.xml 文件中添加以下依赖： <dependencies><dependen…...

编程日记 2025/8/26 2:30:16

系统架构设计师：系统架构概述案例分析与简答题、详细解析与评分要点

10道系统架构概述知识体系案例分析与简答题，涵盖架构设计原则、质量属性、演化过程、评估方法等核心考点，并附详细解析与评分要点： 一、案例分析题（5题） 1. 电商系统高并发场景下的架构设计背景：某电商平…...

编程日记 2025/8/24 11:59:13

关于系统架构思考，如何设计实现系统的高可用？

绪论、系统高可用的必要性系统高可用为了保持业务连续性保障，以及停机成本量化，比如在以前的双十一当天如果出现宕机，那将会损失多少钱？比如最近几年Amazon 2021年30分钟宕机损失$5.6M。当然也有成功的案例，比如异地…...

编程日记 2025/8/26 5:30:07

阿里云短信服务与ASP.NET对接实例

准备工作注册阿里云账号并开通阿里大于(现称"阿里云短信服务")服务获取AccessKey ID和AccessKey Secret 申请短信签名和短信模板并审核通过 ASP.NET Web项目集成步骤 1. 安装阿里云SDK 通过NuGet包管理器安装阿里云短信服务SDK： Install-Package…...

编程日记 2025/8/25 11:11:14

【含文档+PPT+源码】基于微信小程序健康管理之健身房管理系统的设计与实现

课程目标： 教你从零开始部署运行项目，学习环境搭建、项目导入及部署，含项目源码、文档、数据库、软件等资料课程简介： 本课程演示的是一款基于微信小程序健康管理之健身房管理系统的设计与实现，主要针对计算机相关…...

编程日记 2025/8/25 10:27:27

微信小程序转为App实践篇 FinClip

参考下面链接先开始实践微信小程序转为App并上架应用市场_微信小程序生成app-CSDN博客首先在FinClip 官网上下载应用小程序开发工具下载_小程序sdk下载资源-FinClip资源下载|泰坪小程序开放平台下载到本地安装打开导入自己的小程序项目；导入时会解析自己的…...

编程日记 2025/8/25 5:50:37

Qt/C++学习系列之QTreeWidget的简单使用记录

Qt/C学习系列之QTreeWidget的简单使用记录前言1布局1.1布局要求1.2布局代码 2代码设计2.1整体勾选2.2勾选项确认总结前言自己练手的项目中，需要对多个不同层级的选项进行勾选操作，而想到简洁点的操作方式就是使用QTreeWidget进行布局与应用。这里简…...

编程日记 2025/8/26 5:58:51

标易行项目redis内存中放哪些数据

结合你的项目经验，以下是标易行投标服务平台中 Redis 内存存储的核心数据类型及具体应用场景分析： 1. 用户订阅配置与实时推送场景需求：用户订阅招标商机后，系统需实时推送符合订阅条件（如行业、区域、关键词）的标讯。Redis 存储数据：订阅规则缓存：以 Hash 存储用户…...

编程日记 2025/8/24 16:08:06

redis 放置序列化的对象，如果修改对象，需要修改版本号吗？

在 Redis 中存储序列化对象时，如果修改了对象的类结构（例如增删字段、修改字段类型或顺序），是否需要修改版本号取决于序列化协议的兼容性策略和业务场景的容错需求。以下是详细分析： 1. 为什么需要考虑版本号？序列化兼容性问题：当对象的类结构发生变化时，旧版本的序列…...

编程日记 2025/8/23 23:55:46

MySQL——流程控制

一、IF条件语句语法 IF condition THENstatements; ELSEIF condition THENstatements; ELSEstatements; END IF; 判断成绩等级 # 判断成绩等级 # 输入学生的编号,取出学生的第一门课，然后判断当前的课程的等级 drop procedure if exists p2; delimiter $$ crea…...

编程日记 2025/8/21 23:19:17

蓝桥杯 1.路径之谜

1.路径之谜原题目链接问题描述小明冒充 X 星球的骑士，进入了一个奇怪的城堡。城堡里边什么都没有，只有方形石头铺成的地面。假设城堡的地面是 n n 的方格，如下图所示： 骑士要从西北角走到东南角。可以横向或纵向移动&…...

编程日记 2025/8/24 15:29:19

学习笔记十二——Rust 高阶函数彻底入门（超详细过程解析 + 每步数值追踪）

💡 彻底搞懂 Rust 高阶函数！新手最容易卡住的语法调用流程全讲透（含逐步拆解） Rust 函数式编程中有一个常见却经常让人懵的概念：高阶函数（Higher-Order Function） 一看到 fn(i32) -> i32、…...

编程日记 2025/8/25 1:43:10

MySQL入门：数据表的创建

今天我们来介绍一下除HTML外的另一种语言：MySQL语言； MySQL：即一种用于管理和处理关系数据库的标准语言。要用于执行查询、更新、管理数据库中的数据以及定义和操作数据库结构。接下来我会逐一介绍它的作用以及其中数据表，数据…...

编程日记 2025/8/23 16:06:12

Vue3服务端渲染(SSR)深度调优：架构裂变与性能突围

一、全链路渲染管控系统 1.1 智能DNS路由策略 1.2 区域化渲染成本矩阵区域计算成本($/h)网络成本($/GB)命中率QoS保障等级北美东部0.240.0892%SLA-99.9亚太东南0.280.1285%SLA-99.5欧洲西部0.310.1588%SLA-99.7南美圣保罗0.350.1878%SLA-99.0 二、多维度缓存治理策略 2.1 量…...

编程日记 2025/8/23 19:08:27

Python基础语法2

目录 1、顺序语句 2、条件语句 2.1、语法格式 2.2、缩进和代码块 3、空语句 4、循环语句 4.1、while循环 4.2、for循环 4.3、continue 4.4、break 5、综合案例 1、顺序语句默认情况下，Python 的代码执行顺序是按照从上到下的顺序，依次执行的…...

编程日记 2025/8/23 21:52:34

部署LLaMA Factory，及快速使用

什么是LLaMA Factory LLaMA Factory 是一个围绕 Meta 的 LLaMA（Large Language Model Meta AI）模型设计的工具或代码结构，主要用于简化模型的创建、管理和部署。以下是其关键点解析： 1. 核心概念 LLaMA 模型&a…...

编程日记 2025/8/22 20:37:49

11.第二阶段x64游戏实战-框架代码细节优化

免责声明：内容仅供学习参考，请合法利用知识，禁止进行违法犯罪活动！ 本次游戏没法给内容参考于：微尘网络安全上一个内容：10.第二阶段x64游戏实战-添加计时器首先是这个GameData类，我们要让…...

编程日记 2025/8/21 2:35:03

Spring Boot 中使用 Netty

2025/4/15 向一、什么是Netty Netty 是 Java 中一个非常高性能的网络通信框架，用来开发服务器和客户端程序，主要用于处理 TCP/UDP 的网络连接，比如： 聊天服务实时推送高并发网络通信（比如游戏、IoT、金融系统&a…...

编程日记 2025/8/25 6:31:56

题目解答 class Solution(object):def maxSubArray(self, nums):""":type nums: List[int]:rtype: int"""len_nums len(nums)result -1e5left_fit, right_fit 0, len_nums-1if len_nums 1:return nums[0]sum_left, sum_right 0, 0while r…...

编程日记 2025/8/24 5:08:44

Android 项目 Camera 问题：Fail to connect to camera service

问题与处理策略问题描述在 Android 项目中，使用相机时，报如下错误 java.lang.RuntimeException: Fail to connect to camera service# 翻译无法连接到相机服务问题原因通常情况是应用没有获取到相机权限，导致连接相机服务失败 Android…...

编程日记 2025/8/25 17:51:04

Java二叉树深度解析：结构、算法与应用实践指南

一、二叉树核心概念体系 1. 二叉树基础定义 graph TBA((根节点)) --> B((左子节点))A --> C((右子节点))B --> D((叶子节点))B --> E((叶子节点))C --> F[null]C --> G((叶子节点)) 2. 二叉树类型对比类型结构特性典型应用场景普通二叉树任意节点最多两…...

编程日记 2025/8/24 12:06:15

阿里FPGA XCKU3P开箱- 25G 光纤

阿里FPGA XCKU3P开箱 - Hello-FPGA - 博客园 25G 光纤板子有2个SFP的光纤接口，最大支持25G速率，使用ibert 进行验证，SFP在BANK227的GTY 接口。 ibert 配置如下： 测试测试符合预期，确认了SFP的具体位置和支持的速…...

编程日记 2025/8/19 5:36:01

深度学习之微积分

2.4.1 导数和微分 2.4.2 偏导数 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/17227e00adb14472902baba4da675aed.png 2.4.3 梯度具体证明，矩阵-向量积...

编程日记 2025/8/24 7:45:32

Android系统通知机制深度解析：Framework至SystemUI全链路剖析

1. 前言在Android 13的ROM定制化开发中，系统通知机制作为用户交互的核心组件，其实现涉及Framework层到SystemUI的复杂协作。本文将深入剖析从Notification发送到呈现的全链路流程，重点解析关键类的作用机制及系统服务间的交互逻辑&#xff…...

编程日记 2025/8/22 11:25:22

spatk-sql核心

在大数据处理领域，Apache Spark已成为不可或缺的工具，而Spark SQL作为其重要组件，以独特的设计与强大功能，在结构化数据处理中扮演着核心角色。一、Spark SQL的架构基石 Spark SQL构建于Spark核心之上，充分利用了Sp…...

编程日记 2025/8/22 2:03:34

高级语言调用C接口(二)回调函数(3)C#

原接口定义请参照高级语言调用C接口(二)回调函数(2) 我们直接来看C#的接口定义 [DllImport("XXX.dll")]public static extern IntPtr Init(string pcPayDeviceIP, int usTlsPort, OnPayResult onPayResult); 委托定义 [UnmanagedFunctionPointer(CallingConvention…...

编程日记 2025/8/25 9:19:27

ns-3中UDP饱和流发包时间间隔设置最合理值

ns3的官方手册很全，相关书籍也是有的，官网先贴在这里： ns-3 | a discrete-event network simulator for internet systemsa discrete-event network simulator for internet systemshttps://www.nsnam.org/相关的脚本介绍也都有一些&#xf…...

编程日记 2025/8/25 11:14:45

深度学习（第1章——神经网络原理和Pytorch入门）

前言： 本章将讲解神经网络原理，神经元如何处理输入并输出，什么是梯度，多层感知机中梯度的计算，Pytoch自动梯度效果，如何使用原生Python实现一个简单的神经网络，以及对应Pytorch实现。神经网络原…...

编程日记 2025/8/21 1:32:30

使用DeepSeek AI高效降低论文重复率

一、论文查重原理与DeepSeek降重机制 1.1 主流查重系统工作原理文本比对算法：连续字符匹配（通常13-15字符）语义识别技术：检测同义替换和结构调整参考文献识别：区分合理引用与不当抄袭跨语言检测：中英文互译内容识别1.2 DeepSeek降重核心技术深度语义理解：分析句子核心…...

编程日记 2025/8/19 20:13:24

【3D文件】3D打印迪迦奥特曼，3D打印的迪迦圣像，M78遗迹管理局，5款不同的3D打印迪迦免费下载，总有一款适合你

【3D文件】3D打印迪迦奥特曼，3D打印的迪迦圣像，M78遗迹管理局，5款不同的3D打印迪迦免费下载，总有一款适合你资源下载： 3D文件AI生成器，机器学习生成，AI生成3D文件，3D打印迪迦奥特…...

编程日记 2025/8/25 0:47:32

【未解决】Spring AI 1.0.0-M6 使用 Tool Calling 报错，请求破解之法

1.报错 2.Java 代码 2.1 pom.xml <dependencyManagement><dependencies><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-bom</artifactId><version>1.0.0-M6</ver…...

编程日记 2025/8/24 12:10:17

第 2 篇：快速上手 Framer Motion（实操入门）

1. 环境准备在开始使用 Framer Motion 之前，你需要先确保你的开发环境中已经设置好了 React 项目。我们将使用 Next.js 作为示例，如果你是使用其他 React 框架，步骤也基本相同。 1.1 创建一个 Next.js 项目如果你还没有创建 Next.js 项目…...

编程日记 2025/8/21 20:03:13

如何写好合同管理系统需求分析

引言在当今企业数字化转型的浪潮中，合同管理系统作为企业法律合规和商业运营的重要支撑工具，其需求分析的准确性和完整性直接关系到系统建设的成败。本文基于Volere需求过程方法论，结合江铃汽车集团合同管理系统需求规格说明书实践案例&…...

编程日记 2025/8/26 5:12:07

C语言自定义类型详解一：结构体（内存对齐）

结构体的声明： 结构体是一些值的集合，这些值是成员变量，结构体的每个成员可以是不同类型的变量（包括其他结构体变量） 类如：描述一个学生 struct Stu {char name[200];int age;char sex[5];//性别char id…...

编程日记 2025/8/26 1:27:01

GitHub配置密钥

1.生成SSH密钥 1）检查 SSH 密钥是否存在首先，确认是否已经在本地系统中生成了 SSH 密钥对。可以通过以下命令检查： ls -al ~/.ssh 在命令输出中，应该能看到类似 id_rsa 和 id_rsa.pub 这样一对文件。如果这些文件不存在&#…...

编程日记 2025/8/20 21:49:08

PyTorch逻辑回归总结

目录 PyTorch逻辑回归总结神经网络基础基本结构学习路径线性回归简单线性回归多元线性回归逻辑回归核心原理损失函数梯度下降法基本思想关键公式学习率影响 PyTorch实现数据准备模型构建代码优化核心概念对比 PyTorch逻辑回归总结神经网络基础基本结构输入节点隐藏节…...

编程日记 2025/8/25 17:25:19

Browser-use 是连接你的AI代理与浏览器的最简单方式

AI MCP 系列 AgentGPT-01-入门介绍 Browser-use 是连接你的AI代理与浏览器的最简单方式 AI MCP(大模型上下文)-01-入门介绍 AI MCP(大模型上下文)-02-awesome-mcp-servers 精选的 MCP 服务器 AI MCP(大模型上下文)-03-open webui 介绍是一个可扩展、功能丰富且用户友好的…...

编程日记 2025/8/24 10:30:36

nginx自编译重现gzip和chunked的现象

前言最近做项目，发现一个比较好玩的事，nginx的module gzip模式默认支持1KB压缩，和chunked返回，本来现在的很多框架都很完善了，但是，一些新语言框架或者一些老旧框架会不能完整支持chunked，导致…...

编程日记 2025/8/24 19:35:58

RNN - 循环神经网络（概念介绍）

RNN 潜变量自回归模型使用潜变量 h t h_t ht 总结过去信息 p ( h t ∣ h t − 1 , x t − 1 ) p(h_t | h_{t-1}, x_{t-1}) p(ht∣ht−1,xt−1) p ( x t ∣ h t , x t − 1 ) p(x_t | h_t, x_{t-1}) p(xt∣ht,xt−1) 循环神经网络更新隐藏状态&#xff1…...

编程日记 2025/8/24 0:28:51

OpenCV的详细介绍与安装（一）

1.OpenCV概述 OpenCV是一个开源的计算机视觉和机器学习软件库， 它轻量级而且高效——由一系列 C 函数和少量 C 类构成，它支持多种编程语言（如C、Python、Java），并可在Windows、Linux、macOS、Android和iOS等平台上运行…...

编程日记 2025/8/25 17:35:25

50、Spring Boot 详细讲义（七） Spring Boot 与 NoSQL

七 Spring Boot 与 NoSQL 目录 MongoDB 集成Redis 集成Elasticsearch 集成1、 MongoDB 集成 1.1 MongoDB 概述 1.1.1 MongoDB 的基本概念文档型数据库：数据存储为类似 JSON 的文档结构（BSON 格式）。每个文档由字段和值对组成，类似于键值对。支持嵌入式文档和数组，灵活…...

编程日记 2025/8/25 17:24:06

微信小程序组件传参

微信小程序组件传参感觉和vue还是挺像的父组件向子组件传参在小程序中父组件子组件传参，主要使用properties属性。演示下： 创建组件文件夹component，创建组件demoComponent，记得创建的时候选择组件，不是page页面 …...

编程日记 2025/8/23 16:52:06

C++实用函数：bind

本篇来介绍了C++中bind功能。 1 std::bind 在 C++ 里，std::bind 是一个函数模板，其作用是创建一个可调用对象，该对象可绑定到一组参数上。std::bind 的函数原型如下： template< class F, class... Args > /*unspecified*/ bind( F&& f, Args&&...…...

编程日记 2025/8/24 12:42:31