D3 Update,Enter,Exit

最新推荐文章于 2021-09-22 16:21:24 发布
最新推荐文章于 2021-09-22 16:21:24 发布
阅读量361 收藏
点赞数
分类专栏： D3 文章标签： 可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/claroja/article/details/79868402
版权

这里写图片描述

enter

<html>
    <body>
        <p>1</p>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
        var dataset = [ 1 , 2 , 3 , 4 , 5 ];
        var p = d3.select("body").selectAll("p");
        var update = p.data(dataset);
        var enter = update.enter();//获取enter部分
        update.text(function(d){
            return "update " + d;
        });//update部分的处理：更新
        enter.append("p") // 添加p标签直到和数组对齐
            .text(function(d){
                return "enter " + d;
            });//enter部分的处理：添加元素后赋予属性值
        </script>
    </body>
</html>

exit

<html>
    <body>
        <p>1</p>
        <p>2</p>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script>
            var dataset = [ 0 ];
            var p = d3.select("body").selectAll("p");//选择body中的p元素
            var update = p.data(dataset);//获取update部分
            var exit = update.exit();//获取exit部分
            update.text(function(d){
                return "update " + d;
            });//update部分的处理：更新属性值
            //exit部分的处理：修改p元素的属性
            exit.text(function(d){
                    return "exit";
                });
            // exit.remove();//exit部分的处理通常是删除元素
        </script>
    </body>
</html>

参考文献:
http://d3.decembercafe.org/pages/lessons/10.html

Claroja
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
d3.js update enter exit
枝寒不栖
12-29 437
D3的应用非常广泛，现在成为了主流数据可视化工具之一。大家在刚接触使用d3.js的时候，感到最吃力的地方是data(), enter(), exit()这几个操作。 在我接触一段时间，有了一些了解之后，简单说说我的理解。 data() 先看一个例子： ? 1 2 3 4 5 执行代码：
D3.js——理解 update, enter, exit 的使用
intersting的博客
03-07 751
Update、Enter、Exit 是 D3 中三个非常重要的概念，它处理的是当选择集和数据的数量关系不确定的情况。 什么是 Update、Enter、Exit 前几课里，反复出现了形如以下的代码。 svg.selectAll("rect") //选择svg内所有的矩形 .data(dataset) //绑定数组 .enter()
D3学习之update、enter、exit
zkyrjsxdm的博客
12-24 637
依旧参考：http://www.ourd3js.com/wordpress/?p=149 由于动画结束的比较早，就继续学了 enter以前看书的时候遇到过解释，这次按照网站示例敲了一遍，记忆更加深刻了 代码版权归原网站所有，本姑娘只是为了记录自己的学习历程，有一些注释是自己加进去的~<!DOCTYPE html> <html lang="en"> <head> <met
D3 update&enter&exit
Claroja
06-22 99
当元素(element)与数据(data)绑定时,有三种可能 update:元素与数据数量相等,使用selection.data方法返回 enter:没有匹配元素的数据,使用selection.enter方法返回 exit:没有匹配数据的元素,使用selection.exit方法返回 假设有以下数据,现在只有AE索引能匹配上. var div = d3.selectAll("div").data(vowels, name); div.exit(); div.enter(); 参考: https://
D3.js enter、update、exit的理解
m0_37777005的博客
07-23 803
本文以柱状图为例。 数据分为三部分：update、enter、exit。 假设有3个 p 元素，和一个长度为 5 的数组 arr 进行 bind。 那还需要添加两个 p 元素才能实现1v1绑定，则添加的部分为 enter。 若arr的数组长度为 1，则p元素多余两个，需要删除后才能实现1v1绑定，则删除部分为exit。 本例子柱形图主要分为两部分：初始化、数据更新。 //第一部分：初始化函数 ...
D3.js中data(), enter() 和 exit()的问题详解
11-27
大家在刚接触使用d3.js的时候，感到最吃力的地方是data(), enter(), exit()这几个操作。 在我接触一段时间，有了一些了解之后，简单说说我的理解。 data() 先看一个例子： <body> <p></p> <p></p> <p></p>...
d3d11renderers.rar
07-31
https://blog.csdn.net/zlyadvocate/article/details/118669454配套代码
Vue2 D3.js demo
03-03
npm install/yarn npm run serve
d3js流程图代码
04-09
使用d3js开发的js流程图，功能完善，支持事件操作，缩小，放大，平移，选中，保存流程图数据，动态加载流程图数据等功能
D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit
热门推荐
数星星等天明的博客
04-22 1万+
D3.js的v5版本入门教程（第四章）     Update、Enter、Exit是D3.js中很重要的概念，下面来讲一下它们到底是什么？（当你看完后。你就会知道如果数据集个数和选择集个数不匹配的情况下使用data()，D3.js会怎么办）     在使用data()时，例如现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个&lt;p&gt;绑定，但是，现在就有一个问题—...
D3 笔记六：Update、Enter、Exit
JimmyLuo17的博客
07-30 756
什么是 Update、Enter、Exit如果数组为 [3, 6, 9, 12, 15]，将此数组绑定到三个 p 元素的选择集上。可以想象，会有两个数据没有元素与之对应，这时候 D3 会建立两个空的元素与数据对应，这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3]，则会有两个元素没有数据绑定，那么没有数据绑定的部分被称为 Exit。示意图如下所示：如此，便可以
【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
A secret makes a woman woman.
06-07 781
原文： 【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用在使用d3时反复出现这样的代码：svg.selectAll("rect") .data(dataset) .enter() .append("rect")  当所选择的 rect 数量比绑定的数据 dataset ...
可视化工具D3.js教程 入门 （第三章）——理解 Update-更新元素节点 & Enter-增加元素节点 & Exit-删除元素节点
weixin_44867717的博客
09-22 832
可视化工具D3.js教程 入门 （第三章）—— 理解 Update Enter Exit 由于 上一篇 说到的data()方法 给元素绑定数据 是需要元素与数据一一对应的关系， 那么如果元素个数与数据个数 对不上了怎么办？ ——有可能存在 元素多了 或者数据多了的情况， 对于这种情况 就需要用到咱们要说的这三个方法了, 或者说数据绑定的三个步骤： Update 更新元素节点（绑定数据时默认进行的） Enter 增加元素节点（这个的后面会用的很多） Exit 删除元素节点 举例如下： 1、Update-更
理解update-enter-exit三个函数的用法
MayMayJn的博客
01-13 1543
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选择器enter、exit、update
pgLi
12-07 732
1、enter常用在批量创建元素，当查询的元素不足时，通过enter+append去动态创建跟data数据一致的元素 ref.selectAll('circle') .data(path) .enter() .append('circle') .attr('r', 1) // 通过样式控制大小 .attr('class', `dynamic-canvas-circ.
d3学习——data和enter的使用
huangguangyourena的博客
07-25 1563
在d3的学习过程中，其实都会看到一个这样的一个函数，如下代码所示 function(d, i) {} 那么其中的d实际上就是数据，这个数据可以通过d3.data()来接收，之后会通过一个循环，将接收的数据逐个的传给d， 而i就是index，就是下标，下面贴上一个例子来说明 这里看到data就是数据，然后这里通过.data(data)将数据传入，那么text()就是给每个p标签设置文本...
理解D3js中的enter,exit方法
u010089686的博客
01-19 1642
在我第一次使用D3js库写第一个图表的时候，就对他绑定数据的方法感到迷惑，当时怎么也不明白为什么要这样写来绑定数据。等到练习的次数多了，多的东西多了之后再回头看，原来一切都是那么理所应当，原来如此。这就像是我们一生中遇到的很多事情一样，第一次无法接受，经过时间的沉淀，慢慢懂了，就不再耿耿于怀，变得释然。
d3中选择器后的enter（）
fengxfengx的博客
04-19 2001
enter()   先看一个例子： ? 1 2 3 4 5 &lt;body&gt;  &lt;p&gt;&lt;/p&gt;  &lt;p&gt;&lt;/p&gt;  &lt;p&gt;&lt;/p&gt; &lt;/body&gt; 执行代码： ? 1
在页面上设置n个p标签，绑定m个数据的数据集，利用enter-update-exit将原来的p标签中的内容修改为所绑定的数据集，需要展示出enter-update-exit模型的特点。
最新发布
06-06
好的，我会尽可能清晰地回答你的问题。首先，我们先来了解一下D3.js的enter-update-exit模型。 在D3.js中，数据驱动是一种重要的思想，它能够让你更加高效地创建和更新可视化图表。enter-update-exit模型是D3.js中常用的数据驱动模型，它有三个部分： 1. enter部分：表示需要添加的新元素，这些元素是数据集中存在但是DOM中不存在的元素。 2. update部分：表示需要更新的已有元素，这些元素既存在于数据集中也存在于DOM中。 3. exit部分：表示需要删除的已有元素，这些元素存在于DOM中但是不存在于数据集中。 那么，如何使用enter-update-exit模型展示n个p标签，绑定m个数据的数据集呢？下面是一个示例代码： ```javascript // 假设我们有一个包含m个数据的数据集data var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // 选择所有p标签 var p = d3.selectAll("p"); // 绑定数据 var update = p.data(data); // 处理update部分 update.text(function(d) { return d; }); // 处理enter部分 update.enter() .append("p") .text(function(d) { return d; }); // 处理exit部分 update.exit().remove(); ``` 解释一下上面的代码： 1. 首先，我们定义了一个包含10个数字的数据集data。 2. 然后，我们使用d3.selectAll()方法选择所有p标签，并使用data()方法将数据集绑定到选择集上，这时候update部分就包含了所有已经存在的p标签，并且与数据集中的数据进行了绑定。 3. 接着，我们使用text()方法来更新update部分中的p标签的文本内容，这里使用了一个函数来返回每个数据值，从而实现了将数据集中的数据更新到p标签中。 4. 然后，我们使用enter()方法来处理enter部分，也就是需要添加的新元素。这里我们选择了p标签，并使用append()方法来添加新的p标签，然后同样使用text()方法来更新文本内容，这里的函数也是返回每个数据值。 5. 最后，我们使用exit()方法来处理exit部分，也就是需要删除的已有元素。这里我们只需要调用remove()方法将这些已有的p标签从DOM中删除即可。 通过这样的方式，我们就可以使用enter-update-exit模型来展示n个p标签，绑定m个数据的数据集，并且能够充分利用D3.js的数据驱动思想，实现高效的可视化效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值