理解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

相关文章

C++初始化数组的几种常见方法(简单易懂)

《C++初始化数组的几种常见方法(简单易懂)》本文介绍了C++中数组的初始化方法,包括一维数组和二维数组的初始化,以及用new动态初始化数组,在C++11及以上版本中,还提供了使用std::array... 目录1、初始化一维数组1.1、使用列表初始化(推荐方式)1.2、初始化部分列表1.3、使用std::

oracle DBMS_SQL.PARSE的使用方法和示例

《oracleDBMS_SQL.PARSE的使用方法和示例》DBMS_SQL是Oracle数据库中的一个强大包,用于动态构建和执行SQL语句,DBMS_SQL.PARSE过程解析SQL语句或PL/S... 目录语法示例注意事项DBMS_SQL 是 oracle 数据库中的一个强大包,它允许动态地构建和执行

Ubuntu固定虚拟机ip地址的方法教程

《Ubuntu固定虚拟机ip地址的方法教程》本文详细介绍了如何在Ubuntu虚拟机中固定IP地址,包括检查和编辑`/etc/apt/sources.list`文件、更新网络配置文件以及使用Networ... 1、由于虚拟机网络是桥接,所以ip地址会不停地变化,接下来我们就讲述ip如何固定 2、如果apt安

Go路由注册方法详解

《Go路由注册方法详解》Go语言中,http.NewServeMux()和http.HandleFunc()是两种不同的路由注册方式,前者创建独立的ServeMux实例,适合模块化和分层路由,灵活性高... 目录Go路由注册方法1. 路由注册的方式2. 路由器的独立性3. 灵活性4. 启动服务器的方式5.

在不同系统间迁移Python程序的方法与教程

《在不同系统间迁移Python程序的方法与教程》本文介绍了几种将Windows上编写的Python程序迁移到Linux服务器上的方法,包括使用虚拟环境和依赖冻结、容器化技术(如Docker)、使用An... 目录使用虚拟环境和依赖冻结1. 创建虚拟环境2. 冻结依赖使用容器化技术(如 docker)1. 创

Spring排序机制之接口与注解的使用方法

《Spring排序机制之接口与注解的使用方法》本文介绍了Spring中多种排序机制,包括Ordered接口、PriorityOrdered接口、@Order注解和@Priority注解,提供了详细示例... 目录一、Spring 排序的需求场景二、Spring 中的排序机制1、Ordered 接口2、Pri

Idea实现接口的方法上无法添加@Override注解的解决方案

《Idea实现接口的方法上无法添加@Override注解的解决方案》文章介绍了在IDEA中实现接口方法时无法添加@Override注解的问题及其解决方法,主要步骤包括更改项目结构中的Languagel... 目录Idea实现接China编程口的方法上无法添加@javascriptOverride注解错误原因解决方

MySql死锁怎么排查的方法实现

《MySql死锁怎么排查的方法实现》本文主要介绍了MySql死锁怎么排查的方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录前言一、死锁排查方法1. 查看死锁日志方法 1:启用死锁日志输出方法 2:检查 mysql 错误

Java通过反射获取方法参数名的方式小结

《Java通过反射获取方法参数名的方式小结》这篇文章主要为大家详细介绍了Java如何通过反射获取方法参数名的方式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、解决方式方式2.1: 添加编译参数配置 -parameters方式2.2: 使用Spring的内部工具类 -

c++中std::placeholders的使用方法

《c++中std::placeholders的使用方法》std::placeholders是C++标准库中的一个工具,用于在函数对象绑定时创建占位符,本文就来详细的介绍一下,具有一定的参考价值,感兴... 目录1. 基本概念2. 使用场景3. 示例示例 1:部分参数绑定示例 2:参数重排序4. 注意事项5.