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

「数据可视化 D3系列」入门第三章：深入理解 Update-Enter-Exit 模式

news 来源：原创 2025/8/27 15:00:07

深入理解 Update-Enter-Exit 模式

- 一、数据绑定三态：Update、Enter、Exit
- - - 三种状态的直观理解
- 二、基础概念
- - - 1. Update 选区 - 处理已有元素
    - 2. Enter 选区 - 处理新增数据
    - 3. Exit 选区 - 处理多余元素
- 三、完整工作流程
- 四、三种状态的底层原理
- - - 数据绑定过程解析
    - 键函数（Key Function）
- 五、实战技巧
- - - 1. 平滑过渡处理
    - 2. 复杂数据更新策略
- 六、常见问题
- - - 1. 为什么有时候Enter选区不起作用？
    - 2. 如何避免内存泄漏？
- 七、视觉化解释
- 小结
- 下章预告：选择、插入、删除元素

一、数据绑定三态：Update、Enter、Exit

D3.js 的数据绑定遵循一个强大的模式，称为 Update-Enter-Exit 模式，这是D3处理数据与DOM元素匹配的核心机制。

三种状态的直观理解

状态	描述	类比
`Update`	数据与元素匹配的部分	现有员工的岗位调整
`Enter`	数据比元素多，需要创建新元素	新招聘的员工
`Exit`	元素比数据多，需要移除多余元素	离职的员工

在这里插入图片描述

二、基础概念

1. Update 选区 - 处理已有元素

// 基础用法
const update = d3.selectAll("p").data([1, 2, 3]); // 自动创建Update选区update.text(d => d); // 更新匹配的元素

2. Enter 选区 - 处理新增数据

const enter = update.enter(); // 获取Enter选区enter.append("p") // 为多出的数据创建新元素.text(d => d);

3. Exit 选区 - 处理多余元素

const exit = update.exit(); // 获取Exit选区exit.remove(); // 删除没有数据对应的元素

三、完整工作流程

👇 场景代码实例：歌词动态展示

<!DOCTYPE html>
<html>
<head><script src="https://d3js.org/d3.v7.min.js"></script><style>.lyric {padding: 8px;margin: 4px;border-left: 3px solid #3498db;transition: all 0.3s;}.new {background-color: #e3f2fd;}</style>
</head>
<body><button id="change-btn">切换歌词段落</button><div id="lyric-container"><div class="lyric">初始歌词1</div><div class="lyric">初始歌词2</div></div><script>const lyricsSets = [["Verse 1: 起风了", "Verse 2: 云散了"],["Chorus: 阳光正好", "Chorus: 微风不燥", "Bridge: 时光荏苒"],["Outro: 故事未完", "Outro: 待续..."]];let currentSet = 0;d3.select("#change-btn").on("click", function() {currentSet = (currentSet + 1) % lyricsSets.length;updateLyrics(lyricsSets[currentSet]);});function updateLyrics(lyrics) {// 1. 数据绑定const lyricsUpdate = d3.select("#lyric-container").selectAll(".lyric").data(lyrics);// 2. 处理Update选区lyricsUpdate.classed("new", false).text(d => d);// 3. 处理Enter选区lyricsUpdate.enter().append("div").attr("class", "lyric new").text(d => d).style("opacity", 0).transition().duration(500).style("opacity", 1);// 4. 处理Exit选区lyricsUpdate.exit().transition().duration(500).style("opacity", 0).remove();}</script>
</body>
</html>

👇
运行看效果

四、三种状态的底层原理

数据绑定过程解析

数据匹配：D3通过 __data__ 属性将数据与DOM元素关联
创建选区：

const selection = d3.selectAll("div").data([1, 2, 3]);

selection._groups[0] → Update选区
selection._enter → Enter选区
selection._exit → Exit选区

键函数（Key Function）

// 使用键函数精确控制数据匹配
const data = [{id: 1, text: "第一段"},{id: 2, text: "第二段"}
];d3.selectAll(".paragraph").data(data, d => d.id) // 使用id作为匹配键.text(d => d.text);

五、实战技巧

1. 平滑过渡处理

// Enter + Update合并处理
const circles = svg.selectAll("circle").data(data);circles.enter().append("circle").attr("r", 0).merge(circles) // 合并Enter和Update选区.transition().attr("r", d => d.value).attr("cx", (d, i) => i * 30);

2. 复杂数据更新策略

function updateChart(newData) {// 数据绑定const bars = chart.selectAll(".bar").data(newData, d => d.id); // 使用唯一标识// 退出元素淡出bars.exit().transition().duration(600).style("opacity", 0).remove();// 新元素从左侧滑入bars.enter().append("rect").attr("class", "bar").attr("x", -100).attr("y", d => yScale(d.category)).merge(bars).transition().duration(600).attr("x", 0).attr("width", d => xScale(d.value));
}

六、常见问题

1. 为什么有时候Enter选区不起作用？

检查父容器选择是否正确，确保在正确的上下文中添加新元素：

// 正确做法
d3.select("#container").selectAll("div").data(data).enter().append("div"); // 会添加到#container内// 错误做法
d3.selectAll("div") // 可能选不到父容器.data(data).enter().append("div");

2. 如何避免内存泄漏？

始终处理Exit选区，及时移除不需要的元素：

// 最佳实践
update.exit().transition() // 可选的动画效果.remove();

七、视觉化解释

数据与元素匹配示意图

初始元素: [A, B, C]
新数据:   [X, B, Y, Z]匹配过程:
1. Update: B (通过键函数匹配)
2. Enter: X, Y, Z (新数据)
3. Exit: A, C (无匹配数据)

小结

Update-Enter-Exit 是D3数据驱动的核心模式

Update: 处理数据与元素匹配的部分
Enter: 处理新增数据，创建新元素
Exit: 处理多余元素，安全移除

键函数 可以精确控制数据匹配逻辑
平滑过渡 技巧可以提升用户体验
始终遵循 数据绑定三部曲：

const update = selection.data(data);
update.enter().append(); // 处理新增
update.exit().remove();  // 处理移除

下章预告：选择、插入、删除元素

「数据可视化 D3系列」入门第三章：深入理解 Update-Enter-Exit 模式

深入理解 Update-Enter-Exit 模式一、数据绑定三态：Update、Enter、Exit三种状态的直观理解二、基础概念1. Update 选区 - 处理已有元素2. Enter 选区 - 处理新增数据3. Exit 选区 - 处理多余元素三、完整工作流程四、三种状态的底层原理数据绑定过程解析键函数&…...

编程日记 2025/8/27 15:00:07

中间件--ClickHouse-5--架构设计（分布式架构，列式压缩存储、并行计算）

1、整体架构设计 ClickHouse 采用MPP（大规模并行处理）架构，支持分布式计算和存储，其核心设计目标是高性能列式分析。 （1）、存储层列式存储： 数据按列存储（而非传统行式存储&#…...

编程日记 2025/8/22 7:42:26

AgentGPT 在浏览器中组装、配置和部署自主 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/19 22:15:04

【开源项目】Excel手撕AI算法深入理解（三）：Backpropagation、mamba、RNN

项目源码地址：https://github.com/ImagineAILab/ai-by-hand-excel.git 一、Backpropagation 1. 反向传播的本质反向传播是通过链式法则计算损失函数对网络参数的梯度的高效算法，目的是用梯度下降优化参数。其核心思想是： 前向传播&#xf…...

编程日记 2025/8/21 4:27:20

uniapp的通用页面及组件基本封装

1.基本布局页面适用于自定义Navbar头部 <template><view class"bar" :style"{height : systemInfo.statusBarHeight px, background: param.barBgColor }"></view><view class"headBox" :style"{ height: param.h…...

编程日记 2025/8/23 13:48:46

Ubuntu和Debian 操作系统的同与异

首先需要说明：Ubuntu 是基于 Debian 操作系统开发的。它们之间的关系如下起源与发展：Debian 是一个社区驱动的开源 Linux 发行版，始于 1993 年，是最早的 Linux 发行版之一，以其稳定性和自由软件政策著称。Ubuntu 是基…...

编程日记 2025/8/22 22:01:52

【android bluetooth 协议分析 21】【ble 介绍 1】【什么是RPA】

通俗易懂地讲解一下 BLE（低功耗蓝牙）中的 Resolvable Private Address（RPA，可解析私有地址）。 1. 一句话理解 RPA 是一种“临时的、隐私保护的蓝牙设备地址”，别人无法随便追踪你，但“授权的设…...

编程日记 2025/8/17 20:53:56

狂神SQL学习笔记九：MyISAM 和 lnnoDB 区别

show create database school –查看创建数据库的语句 show create table student – 查看student数据表的定义语句 desc student –显示表的结构 MYISAMINNODB事务支持不支持支持数据行锁定不支持支持行锁定外键不支持支持全文索引支持不支持表空间的大小较小较大&#x…...

编程日记 2025/8/23 10:49:09

深度学习--神经网络的构造

在当今数字化时代，深度学习已然成为人工智能领域中最为耀眼的明星。而神经网络作为深度学习的核心架构，其构造方式决定了模型的性能与应用效果。本文将深入探讨深度学习神经网络的构造，带您领略这一前沿技术的奥秘。一、神经网络基础概念…...

编程日记 2025/8/24 2:58:23

Jenkins 代理自动化-dotnet程序

两种方式容器部署本地部署容器部署可自动实现，服务器重启，容器自动运行主要将dockerfile 写好本地部署 1.服务器重启自动运行代理参考下面的链接，只是把程序换成 java程序，提前确认好需要的jdk版本 Ubuntu20.04 设置开机…...

编程日记 2025/8/26 22:46:53

【区块链+ 人才服务】“CERX Network”——基于 FISCO BCOS 的研学资源交换网络 | FISCO BCOS 应用案例

CERX Network （Consortium-based Education Resource Exchanging Network） 是定位于面向高校科学研究与教学的分布式研学资产交换网络， 构建一个用于数据、算法模型、论文和课程的研学资源价值流转平台。项目以 FISCO BCOS 联盟链为底层平…...

编程日记 2025/8/22 8:39:29

中间件--ClickHouse-6--SQL基础（类似Mysql，存在差异）

ClickHouse语言类似Mysql，如果熟悉Mysql，那么学习ClickHouse的语言还是比较容易上手的。 1、建表语法（CREATE TABLE） （1）、表引擎（Engine） MySQL： 默认使用 InnoDB 引…...

编程日记 2025/8/26 4:09:37

[MSPM0开发]MSPM0G3507番外一：关于使用外部高速晶振HFXT后程序可能不运行的问题

一、问题描述如下图所示，MSPM0G3507时钟树配置为使用外部HFXT（外部高速晶振）作为HSCLK时钟源。配置结果MCLK 40MHz。另外配置PB22为输出模式，控制外部LED亮灭。在main.c中主要代码如下： 主要完成延时并翻转LED控…...

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

2025年计算机领域重大技术突破与行业动态综述

——前沿技术重塑未来，开发者如何把握机遇？ 2025年第一季度，全球计算机领域迎来多项里程碑式进展，从量子计算到人工智能，从芯片设计到网络安全，技术革新与产业融合持续加速。本文梳理近三个月内最具影响力…...

编程日记 2025/8/24 2:01:44

我的机器学习之路（初稿）

文章目录一、机器学习定义二、核心三要素三、算法类型详解1. 监督学习（带标签数据）2. 无监督学习（无标签数据）3. 强化学习（决策优化）(我之后主攻的方向) 四、典型应用场景五、学习路线图六、常见误区警示七…...

编程日记 2025/8/17 20:48:02

交易模式革新：Eagle Trader APP上线，助力自营交易考试效率提升

近年来，金融行业随着投资者需求的日益多样化，衍生出了众多不同的交易方式。例如，为了帮助新手小白建立交易基础，诞生了各类跟单社区；而与此同时，一种备受瞩目的交易方式 —— 自营交易模式，正吸…...

编程日记 2025/8/21 21:58:14

emotn ui桌面tv版官网-emotn ui桌面使用教程

在智能电视和盒子的使用中，出色的桌面系统能大幅提升体验，Emotn UI桌面TV版便是其中的佼佼者。访问Emotn UI桌面TV版官网，首页简洁清晰，“产品介绍”“下载中心”等板块一目了然。官网对其功能优势详细阐述，在“下载中…...

编程日记 2025/8/20 20:31:33

Django之modelform使用

Django新增修改数据功能优化目录 1.新增数据功能优化 2.修改数据功能优化在我们做数据优化处理之前, 我们先回顾下传统的写法, 是如何实现增加修改的。我们需要在templates里面新建前端的页面, 需要有新增还要删除, 比如说员工数据的新增, 那需要有很多个输入框, 那html…...

编程日记 2025/8/26 13:05:33

Hadoop：大数据时代的基石

在当今数字化浪潮中，数据量呈爆炸式增长，企业和组织面临着前所未有的数据处理挑战。从社交媒体的海量信息到物联网设备的实时数据，如何高效地存储、管理和分析这些数据成为了一个关键问题。Apache Hadoop 作为大数据处理领域的核心框架&#…...

编程日记 2025/8/26 20:47:31

定制开发还是源码搭建？如何快速上线同城外卖跑腿APP？

在“万物皆可同城配送”的时代，同城外卖跑腿APP成为众多创业者和本地服务商的热门选择。无论是打造本地生活服务平台，还是拓展快送业务，拥有一款功能完善、体验流畅的外卖跑腿APP，已经成为进入市场的标配。然而，对于…...

编程日记 2025/8/22 7:44:09

How AI could empower any business - Andrew Ng

How AI could empower any business - Andrew Ng References 人工智能如何为任何业务提供支持 empower /ɪmˈpaʊə(r)/ vt. 授权；给 (某人) ...的权力；使控制局势；增加 (某人的) 自主权When I think about the rise of AI, I’m reminded …...

编程日记 2025/8/17 19:07:36

1.SpringApplication 1.1.自定义banner 类路径添加banner.txt或设置spring.banner.location就可以定制 banner 1.2.自定义 SpringApplication import org.springframework.boot.Banner; import org.springframework.boot.SpringApplication; import org.springframework.bo…...

编程日记 2025/8/25 10:23:45

系统环境变量有什么实际作用，为什么要配置它

系统环境变量有什么实际作用，为什么要配置它系统环境变量具有以下重要实际作用：指定程序路径：操作系统通过环境变量来知晓可执行文件、库文件等的存储位置例如，当你在命令提示符或终端中输入一个命令时，系统会根据环境变量PATH中指定的路径去查找对应的可执行文件。如果…...

编程日记 2025/8/21 8:24:04

C++ | STL之list详解：双向链表的灵活操作与高效实践

引言 std::list 是C STL中基于双向链表实现的顺序容器，擅长高效插入和删除操作，尤其适用于频繁修改中间元素的场景。与std::vector不同，std::list的内存非连续，但提供了稳定的迭代器和灵活的元素管理。本文将全面解析std::list的…...

编程日记 2025/8/24 10:29:51

Spring Cloud 服务间调用深度解析

前言在构建微服务架构时，服务间的高效通信是至关重要的。Spring Cloud 提供了一套完整的解决方案来实现服务间的调用、负载均衡、服务发现等功能。本文将深入探讨 Spring Cloud 中服务之间的调用机制，并通过源码片段和 Mermaid 图表帮助读者更好地理解…...

编程日记 2025/8/20 21:43:25

什么是时间复杂度和空间复杂度？

什么是时间复杂度和空间复杂度？时间复杂度：衡量代码运行时间随输入规模增大而增长的速度。简单来说，就是“代码跑多快”。空间复杂度：衡量代码运行时额外占用的内存空间随输入规模增大而增长的速度。简单来说，就是“代码用多少内存”。我们通常用大 O 表示法（Big O N…...

编程日记 2025/8/27 1:21:13

算法思想之分治-快排

欢迎拜访：雾里看山-CSDN博客本篇主题：算法思想之分治-快排发布时间：2025.4.15 隶属专栏：算法目录算法介绍核心步骤优化策略例题颜色分类题目链接题目描述算法思路代码实现排序数组题目链接题目描述算法思路代码实现数组中的…...

编程日记 2025/8/23 5:04:20

25.4.15学习总结

问题： 邮箱验证码通过公钥加密后发到前端，在前端用私钥解密验证可行吗？ 结论： 在前端使用私钥解密通过公钥加密的邮箱验证码在技术上是可行的，但存在严重的安全风险，不建议采用。问题分析非对称加密的…...

编程日记 2025/8/19 1:25:14

小程序获取用户总结（全）

获取方式目前小程序获取用户一共有3中（自己接触到的），但由于这个API一直在改，所以不确定后期是否有变动，还是要多关注官方公告。方式一使用wx.getUserInfo 实例： wxml 文件<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo&quo…...

编程日记 2025/8/27 14:44:43

如何成为一名嵌入式软件工程师？

如何成为一名嵌入式软件工程师？ 01明确岗位的角色与定位嵌入式软件工程师主要负责开发运行在特定硬件平台上的软件，这些软件通常与硬件紧密集成，以实现特定的功能。不仅需要精通编程语言（如C/C、Java等）和软件开发工…...

编程日记 2025/8/25 3:24:01

机器人发展未来两年会有突破吗？

未来两年，机器人技术将在芯片、编码器、材料、加工工艺和AI等核心领域迎来系统性突破，推动行业从专用化向通用化转型。以下从技术路径、产业动态和商业化前景三个维度展开分析，结合权威数据与技术趋势，构建机器人技术演进的全景框架。一、芯片技术：3nm制程与存算一体架构…...

编程日记 2025/8/17 14:22:27

【grafana原生告警中心配置飞书机器人告警】

在grafana中的connect point中使用webhook的方式推送到飞书，始终无法触发告警，原因是grafana推送的格式飞书不识别，现有两种方式 1.使用中转服务使用flask搭建一个服务，grafana告警先通过webhook发送到web服务中，格…...

编程日记 2025/8/27 0:51:43

HTTP HTTPS RSA

推荐阅读小林coding HTTP篇文章目录 HTTP 80HTTP 响应码1xx：信息性状态码（Informational）2xx：成功状态码（Success）3xx：重定向状态码（Redirection）4xx：客户端…...

编程日记 2025/8/26 5:21:40

【机器学习】如何正确下载sklearn包

TOC 直接pip install sklearn时，报错 sklearn的包，实际上叫scikit-learn pip install scikit-learn发现成功了： 总结下载sklearn包的语句：pip install scikit-learn 完成。...

编程日记 2025/8/21 14:49:52

【Python进阶】断言（assert）的十大核心应用场景解析

目录前言：技术背景与价值当前技术痛点解决方案概述目标读者说明一、技术原理剖析核心概念图解核心作用讲解关键技术模块技术选型对比二、实战演示环境配置要求核心代码实现（10个案例）案例1：参数合法性检查案例2：不变…...

编程日记 2025/8/24 2:01:50

关于汽车辅助驾驶不同等级、技术对比、传感器差异及未来发展方向的详细分析

以下是关于汽车辅助驾驶不同等级、技术对比、传感器差异及未来发展方向的详细分析： 一、汽车辅助驾驶等级详解根据SAE（国际自动机工程师学会）的标准，自动驾驶分为 L0到L5 六个等级： 1. L0（无自动化&…...

编程日记 2025/8/24 12:01:21

STM32 HAL库之WDG示例代码

独立看门狗（IWDG） 初始化独立看门狗，在main.c中的 MX_IWDG_Init();，也就是iwdg.c中的初始化代码 void MX_IWDG_Init(void) {/* USER CODE BEGIN IWDG_Init 0 *//* USER CODE END IWDG_Init 0 *//* USER CODE BEGIN IWDG_Init 1 …...

编程日记 2025/8/27 8:15:58

【差分隐私相关概念】瑞丽差分隐私（RDP）命题10

命题10证明中的最后一个不等号成立，关键在于将事件 A A A上的积分与Rnyi散度 D α ( P ∥ Q ) D_\alpha(P \parallel Q) Dα(P∥Q)的定义联系起来，并通过积分放缩得到上界。具体推导如下： Rnyi散度的定义： D α ( P ∥ Q ) 1 …...

编程日记 2025/8/27 7:25:38

Android 开发如何生成系统签名

在源码中拿到安全文件文件路径 lagvm/LINUX/android/build/target/product/security如下两个文件 platform.pk8 platform.x509.pem 使用Android studio生成一个jks Android studio 顶部 buildGenerate Signed Bundle or APKapkcrate new记住记住alias 和password linux下…...

编程日记 2025/8/24 2:02:03

（EtherCAT 转 EtherNet/IP）EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关

型号协议转换通信网关 EtherCAT 转 EtherNet/IP MS-GW12 概述 MS-GW12 是 EtherCAT 和 EtherNet/IP 协议转换网关，为用户提供两种不同通讯协议的 PLC 进行数据交互的解决方案，可以轻松容易将 EtherNet/IP 网络接入 EtherCAT 网络中，方便…...

编程日记 2025/8/25 3:34:40

适合stm32 前端adc使用的放大器芯片

在 STM32 前端 ADC 应用中，合适的放大器芯片需具备低噪声、高精度、低失调电压等特性。以下为你推荐几款常用的放大器芯片： 低功耗、高精度型 OPA2333 特点：这是一款微功耗、零漂移运算放大器，失调电压极低，仅为 2.5…...

编程日记 2025/8/26 17:03:22

《Ethical Implications of ChatGPT in Higher Education: A Scoping Review》全文翻译

《Ethical Implications of ChatGPT in Higher Education: A Scoping Review》 ChatGPT在高等教育中的伦理影响：一项范围界定性综述摘要本范围界定性综述探讨了在高等教育中使用ChatGPT所引发的伦理挑战。通过回顾近期发表的英文、中文和日文的学术文章&#x…...

编程日记 2025/8/24 20:11:38

day26 学习笔记

文章目录前言一、边缘填充1.边界复制2.边界反射3.边界常数4.边界包裹5.代码示例二、透视变换三、颜色加法前言通过今天的学习，我掌握了OpenCV中有关边缘填充，透视变换以及颜色加法的相关概念和操作一、边缘填充当我们对图像进行仿射变换后往往会发…...

编程日记 2025/8/20 16:30:33

LVGL Animation Image（Animimg）控件详解

一、Animation Image（Animimg）控件详解 1. 概述功能：Animimg 是 LVGL 中用于显示动画图像的控件。特点：支持从多个静态图像创建动画效果。 2. 创建和初始化创建方法：lv_obj_t * lv_animimg_create(lv_obj_t * pa…...

编程日记 2025/8/26 21:56:05

【unity游戏开发入门到精通——UGUI】GraphicRaycaster图形射线投射器组件

注意：考虑到UGUI的内容比较多，我将UGUI的内容分开，并全部整合放在【unity游戏开发——UGUI】专栏里，感兴趣的小伙伴可以前往逐一查看学习。文章目录前言Graphic Raycaster参数1、Ignore Reversed Graphics：是否忽略反…...

编程日记 2025/8/26 14:03:19

WPF GDI 画晶圆Mapping图

效果图 UI代码 <Window x:Class="WpfWaferMapping.Window3"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expre…...

编程日记 2025/8/19 1:08:39