D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit

最新推荐文章于 2025-06-24 09:31:34 发布
最新推荐文章于 2025-06-24 09:31:34 发布
阅读量1.3w 收藏 11
点赞数 6
CC 4.0 BY-SA版权
分类专栏： D3.js的v5版本入门教程 文章标签： d3.js v5 v4 update、enter、exit
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34414916/article/details/80027353

D3.js的v5版本入门教程（第四章）

    Update、Enter、Exit是D3.js中很重要的概念，下面来讲一下它们到底是什么？（当你看完后。你就会知道如果数据集个数和选择集个数不匹配的情况下使用data()，D3.js会怎么办）

    在使用data()时，例如现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个<p>绑定，但是，现在就有一个问题——数据集个数和选择集个数不匹配怎么办？这样就需要理解Update、Enter、Exit

    例子一：update和enter：数组[3,6,9,12,15]绑定到三个<p>上。可以想象到，数组的最后两个元素没有可以绑定的元素，这时D3会建立两个空的元素与数组最后的两个数据相对于，那么这部分就称为Enter。而有元素与数据对应的部分就称为Update

    例子二：exit：如果数组[3]绑定到三个<p>上，可以想象，最后两个<p>没有可绑定的数据，那么没有数据绑定的部分就称为Exit

    如下图(此图片非原创)

        

    1、Update与Enter的使用

<body>
    <p>dog</p>
    <p>cat</p>
    <p>pig</p>
    
    <script>
最低0.47元/天 解锁文章

200万优质内容无限畅学
D3.js的v5版本入门教程（前篇）—— 关于
数星星等天明的博客
04-23 5万+
D3.js入门教程     1、D3.js简介         D3.js是一个强大的数据可视化js语言，可以利用svg在网页上展示各种精美的矢量图     2、D3.js的官方         官网：https://d3js.org/         官方API：https://github.com/d3/d3/blob/master/API.md     3、适合人群      ...
D3.js的V5版本-Vue框架中使用(第二章) ---元素及操作、Update、Enter、Exit
空谷足音的博客
06-15 838
1、选择元素   在D3.js中，选择元素的函数有两个d3.select() d3.selectAll()         这两个函数返回的就是选择集常见的用法如下：let svg = body.select("svg");//选择body中的svg元素  let p = body.selectAll("p");//选择body中所有的p元素  2、元素操作name为元素名称； before:cs...
理解update-enter-exit三个函数的用法
MayMayJn的博客
01-13 1664
update、enter、exit是D3比较重要的三个函数。 先上代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>理解update-enter-exit三个函数的用法</title> </head> <body> <p>Apple</p> <p>Pen</p>
D3 Update,Enter,Exit
Claroja
04-09 404
enter &lt;html&gt; &lt;body&gt; &lt;p&gt;1&lt;/p&gt; &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt; &lt;script&gt;
D3.js数据可视化教程：使用滑块交互式过滤数据
最新发布
gitblog_01082的博客
06-24 432
D3.js数据可视化教程：使用滑块交互式过滤数据 概述 本教程基于scotthmurray/d3-book项目中的示例，展示如何使用D3.js创建一个带有垂直滑块的交互式柱状图。通过滑块控制，用户可以动态过滤并高亮显示满足特定条件的数据条。 核心功能实现 1. 数据准备与初始化 首先定义一个包含20个数据点的数据集，每个数据点是一个对象，包含key和value两个属性： var dataset =...
D3.js——理解 update, enter, exit 的使用
intersting的博客
03-07 843
Update、Enter、Exit 是 D3 中三个非常重要的概念，它处理的是当选择集和数据的数量关系不确定的情况。 什么是 Update、Enter、Exit 前几课里，反复出现了形如以下的代码。 svg.selectAll("rect") //选择svg内所有的矩形 .data(dataset) //绑定数组 .enter()
【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
A secret makes a woman woman.
06-07 874
原文： 【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用在使用d3时反复出现这样的代码：svg.selectAll("rect") .data(dataset) .enter() .append("rect")  当所选择的 rect 数量比绑定的数据 dataset ...
详解d3.js中data(), enter() 和 exit()
大脸猫的博客
11-17 2028
相信大多数人对d3.js并不陌生。这是一个由纽约时报可视化编辑 Mike Bostock与他斯坦福的教授和同学合作开发的数据文件处理的JavaScript Library，全称叫做Data-Driven Documents，在d3.js中data(), enter() 和 exit()比较常见，下面给大家就这方面的知识给大家详解 D3的应用非常广泛，现在成为了主流数据可视化工具之一。大家在刚接触使用d3.js的时候，感到最吃力的地方是data(), enter(), exit()这几个操作。 在我接触一
D3.js的V5版本-Vue框架中使用(第八章) ---树状图
空谷足音的博客
07-12 3790
一. api简介d3.tree()，创建一个树状图生成器d3.tree().size()，定义树的大小d3.hierarchy()，层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据node.descendants()得到所有的节点，已经经过转换的数据node.links()，得到所有的边，已经经过转换的数据二.Vue中使用*点击节点可展开收缩&lt;template l...
d3.js data-join（03）
sandy_star
01-25 1423
前言：本篇主要是d3.js里面的datajoin 一、什么是Data-join? 本质上是将数据与图元进行绑定 例如： 每个国家的人数绑定到矩形的长度 疫情感染的人数比例绑定到圆的半径 为什么要使用data-join？ 使用data-join可以省去大量根据数据设置图元属性的代码量 对于动态变化的数据提供统一的接口 以数据为中心的可视化操作 根据数据的每个属性自动调整绑定图元的属性 不再需要手动添加、修改、删除图元 会根据Data-join的绑定自动推断 如果图元的数目不等于数据的条目.
D3.js enter、update、exit的理解
m0_37777005的博客
07-23 941
本文以柱状图为例。 数据分为三部分：update、enter、exit。 假设有3个 p 元素，和一个长度为 5 的数组 arr 进行 bind。 那还需要添加两个 p 元素才能实现1v1绑定，则添加的部分为 enter。 若arr的数组长度为 1，则p元素多余两个，需要删除后才能实现1v1绑定，则删除部分为exit。 本例子柱形图主要分为两部分：初始化、数据更新。 //第一部分：初始化函数 ...
D3学习之update、enter、exit
zkyrjsxdm的博客
12-24 710
依旧参考：http://www.ourd3js.com/wordpress/?p=149 由于动画结束的比较早，就继续学了 enter以前看书的时候遇到过解释，这次按照网站示例敲了一遍，记忆更加深刻了 代码版权归原网站所有，本姑娘只是为了记录自己的学习历程，有一些注释是自己加进去的~<!DOCTYPE html> <html lang="en"> <head> <met
D3 笔记六：Update、Enter、Exit
JimmyLuo17的博客
07-30 888
什么是 Update、Enter、Exit如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到三个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3]，则会有两个元素没有数据绑定，那么没有数据绑定的部分被称为 Exit。示意图如下所示：如此，便可以
可视化工具D3教程
热门推荐
Blog | Laulliam
06-27 7万+
可视化工具D3教程第1章 D3简介第2章 第一个程序 Hello World第3章 正式进入D3的世界第4章 选择、插入、删除元素第5章 做一个简单的图表第6章 比例尺的使用第7章 坐标轴第8章 完整的柱形图第9章 让图表动起来第10章 理解 update()、enter()、exit()第11章 交互式操作第12章 布局第13章 饼状图第14章 力导向图第15章 树状图第16章 地图可视化学习D......
技术分享——用D3.js框架V5版本入门基础
qq610886634的专栏
04-03 591
#技术分享——用D3.js框架V5版本入门基础 ##一、前言 ​ 在最近公司项目中，因为需求原因需要使用D3.js实现力导向图。所以花了一些时间对D3.js这个绘制图表的框架进行了研究。 和Echarts相比D3的优势在于： 使用svg绘制图形，不依赖分辨率； 支持事件处理器，能满足交互较复杂的需求； 基于xml绘制图形，可以操作dom 缺点在于： 支持IE9以上的主流浏览器，...
D3.js的V5版本-Vue框架中使用-树状图
hsany330的专栏
06-09 1331
一. api简介 d3.tree()，创建一个树状图生成器 d3.tree().size()，定义树的大小 d3.hierarchy()，层级布局，需要和tree生成器一起使用，来得到绘制树所需要的节点数据和边数据 node.descendants()得到所有的节点，已经经过转换的数据 node.links()，得到所有的边，已经经过转换的数据 二.Vue中使用 *点击节点可展开收缩 <template lang='pug'> div.tree-contain...
d3学习——data和enter的使用
huangguangyourena的博客
07-25 1758
在d3的学习过程中，其实都会看到一个这样的一个函数，如下代码所示 function(d, i) {} 那么其中的d实际上就是数据，这个数据可以通过d3.data()来接收，之后会通过一个循环，将接收的数据逐个的传给d， 而i就是index，就是下标，下面贴上一个例子来说明 这里看到data就是数据，然后这里通过.data(data)将数据传入，那么text()就是给每个p标签设置文本...
（补充）赶鸭子上架学D3.jsdataenter的（二）---data，datum，update，enter，exit基础概念（b站从零开始画图表学习笔记，感谢up主睿小狼）
weixin_41032724的博客
06-17 750
绑定数据D3.js常用的绑定数据的方法有两种   data和datum从英文单词角度来说是data的附属和date的区别与共同点：都是绑定数据集，但是data是将数组中的每一个元素绑定到svg元素上面，而datum的作用是把数组本身绑定到每个svg元素上面，简而言之，data是一对一，datum是一对多对数据状态的处理d3把数据的状态分为三种形式：数据与元素对应（update）还没有元素但是有数据...
d3 v5 api shape.line
Claroja
05-14 599
方法 描述 d3.line 创建一个线生成器 line 给所给数据集生成线 line.x 设置x存取器 line.y 设置y存取器 line.defined set the defined accessor. line.curve set the curve interpolator. line.con...
D3.js数据绑定入门：enter、update、exit详解
D3.js是当下流行的JavaScript可视化库，它允许...对于想要深入学习D3.js的开发者来说，理解这三种状态是必须跨越的第一步。通过实践和不断的实验，开发者可以灵活地应用这些概念，创造出具有高度交互性的可视化应用。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值