理解D3js中的enter,exit方法

2024-05-05 16:38
文章标签 方法 理解 exit enter d3js

本文主要是介绍理解D3js中的enter,exit方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在我第一次使用D3js库写第一个图表的时候,就对他绑定数据的方法感到迷惑,当时怎么也不明白为什么要这样写来绑定数据。等到练习的次数多了,多的东西多了之后再回头看,原来一切都是那么理所应当,原来如此。

这就像是我们一生中遇到的很多事情一样,第一次无法接受,经过时间的沉淀,慢慢懂了,就不再耿耿于怀,变得释然。

但是我还是怕忘了此刻,所以马上写一篇文字总结一下。

<body><p></p>
</body>
<script>var p = d3.select('body').selectAll('p');var dataset = [1,2,3,4,5,6,7,13];var update = p.data(dataset);var enter = update.enter();var exit = update.exit();
</script>

上边的HTML里边包含一个p标签,在JS脚本里边声明一个存放数据的数组dataset。

首先使用D3的selectAll()方法把所有的p标签选择出来,之后使用data() 方法为p标签集合绑定数据,并将所有的绑定了数据的p元素赋值给自己声明的update变量。

update 变量里包含所有已经存在的p标签,就上边的HTML来将就只有一个p标签。

enter变量包含的是dataset数组中的元素个数减去HTML中已经存在的元素个数的p标签(dataset中有8个元素,而HTML中有1个,因此enter中就有7个p标签元素),当数据中的元素个数大于HTML中已存在的元素个数时才能得到enter多出的那部分需要绑定数据的标签元素。

exit变量和enter 正好相反,当dataset中的数据元素个数少于HTML中需要绑定数据的元素个数时,就会得到多余出来的标签元素,这些多余出来的标签元素就存放在exit变量中。

这样enter()exit() 两个函数的含义就搞明白了!

这篇关于理解D3js中的enter,exit方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/962157

相关文章

Java中的getBytes()方法使用详解

《Java中的getBytes()方法使用详解》:本文主要介绍Java中getBytes()方法使用的相关资料,getBytes()方法有多个重载形式,可以根据需要指定字符集来进行转换,文中通过代... 目录前言一、常见重载形式二、示例代码三、getBytes(Charset charset)和getByt

spring IOC的理解之原理和实现过程

《springIOC的理解之原理和实现过程》:本文主要介绍springIOC的理解之原理和实现过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、IoC 核心概念二、核心原理1. 容器架构2. 核心组件3. 工作流程三、关键实现机制1. Bean生命周期2.

nginx负载均衡及详细配置方法

《nginx负载均衡及详细配置方法》Nginx作为一种高效的Web服务器和反向代理服务器,广泛应用于网站的负载均衡中,:本文主要介绍nginx负载均衡及详细配置,需要的朋友可以参考下... 目录一、 nginx负载均衡策略1.1 基本负载均衡策略1.2 第三方策略1.3 策略对比二、 nginx配置2.1

Java调用Python的四种方法小结

《Java调用Python的四种方法小结》在现代开发中,结合不同编程语言的优势往往能达到事半功倍的效果,本文将详细介绍四种在Java中调用Python的方法,并推荐一种最常用且实用的方法,希望对大家有... 目录一、在Java类中直接执行python语句二、在Java中直接调用Python脚本三、使用Run

Android 12解决push framework.jar无法开机的方法小结

《Android12解决pushframework.jar无法开机的方法小结》:本文主要介绍在Android12中解决pushframework.jar无法开机的方法,包括编译指令、框架层和s... 目录1. android 编译指令1.1 framework层的编译指令1.2 替换framework.ja

在.NET平台使用C#为PDF添加各种类型的表单域的方法

《在.NET平台使用C#为PDF添加各种类型的表单域的方法》在日常办公系统开发中,涉及PDF处理相关的开发时,生成可填写的PDF表单是一种常见需求,与静态PDF不同,带有**表单域的文档支持用户直接在... 目录引言使用 PdfTextBoxField 添加文本输入域使用 PdfComboBoxField

SQLyog中DELIMITER执行存储过程时出现前置缩进问题的解决方法

《SQLyog中DELIMITER执行存储过程时出现前置缩进问题的解决方法》在SQLyog中执行存储过程时出现的前置缩进问题,实际上反映了SQLyog对SQL语句解析的一个特殊行为,本文给大家介绍了详... 目录问题根源正确写法示例永久解决方案为什么命令行不受影响?最佳实践建议问题根源SQLyog的语句分

Java 中的 @SneakyThrows 注解使用方法(简化异常处理的利与弊)

《Java中的@SneakyThrows注解使用方法(简化异常处理的利与弊)》为了简化异常处理,Lombok提供了一个强大的注解@SneakyThrows,本文将详细介绍@SneakyThro... 目录1. @SneakyThrows 简介 1.1 什么是 Lombok?2. @SneakyThrows

判断PyTorch是GPU版还是CPU版的方法小结

《判断PyTorch是GPU版还是CPU版的方法小结》PyTorch作为当前最流行的深度学习框架之一,支持在CPU和GPU(NVIDIACUDA)上运行,所以对于深度学习开发者来说,正确识别PyTor... 目录前言为什么需要区分GPU和CPU版本?性能差异硬件要求如何检查PyTorch版本?方法1:使用命

Qt实现网络数据解析的方法总结

《Qt实现网络数据解析的方法总结》在Qt中解析网络数据通常涉及接收原始字节流,并将其转换为有意义的应用层数据,这篇文章为大家介绍了详细步骤和示例,感兴趣的小伙伴可以了解下... 目录1. 网络数据接收2. 缓冲区管理(处理粘包/拆包)3. 常见数据格式解析3.1 jsON解析3.2 XML解析3.3 自定义