文档章节

D3.js selectAll()函数与enter()函数

横着走的螃蟹
 横着走的螃蟹
发布于 2015/04/15 15:07
字数 266
阅读 395
收藏 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3.v3.js"></script>
</head>
<body>
<p> 天天 </p>
<p> 天天 </p>
<script type="text/javascript">
var dataset = [ 5, 10, 15, 20, 25 ];

console.log(d3.select("body").selectAll("p").data());
//输出[undefined, undefined]

d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("div")
.text("New paragraph!")

console.log(d3.select("body").selectAll("p").data());
//输出[5, 10]

/*总结:
 * enter()函数的执行,依赖于selectAll()函数执行的结果,有三种情况
 * 1.没有选中元素,返回空值,enter()函数把数据完全绑定到append的元素上
 * 2.(上面代码)选中两个元素,返回两个元素,enter()函数把前两个数据绑定到这两个元素上,不执行append()等下面代码。多余的数据执行append,绑定到新元素上。
 * 3.选中元素数量比数据多,返回多个元素,数据完全绑定到前5个元素上(共5个数据),enter()函数一次也不往下执行
 */
</script>
</body>
</html>


© 著作权归作者所有

共有 人打赏支持
横着走的螃蟹
粉丝 13
博文 142
码字总数 30898
作品 0
朝阳
高级程序员
可视化前端初探(一)--D3.js

一.D3.js 概述 1.D3 是什么 D3 的全称是(Data-Driven Documents),翻译过来就是一个被数据驱动的文档。简而言之,就是一个主要是用来做数据可视化的 JavaScript 的函数库。由于它本质上是 ...

nightzing
2017/12/14
0
0
D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素

D3.js的v5版本入门教程(第五章) 1、选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的中有三个 ,如下 dog 选择第一个元素 var ...

qq_34414916
04/22
0
0
d3.js学习笔记--Mike Bostock: What makes Software Good?

enter, update和exit 这里实际的数据为: ["h", "e", "l", "l", "o"]. 我们需要将实际的数据和<text>相关联起来. 所以我们需要以下步骤: 1) 使用data函数将数据绑定到所选择的DOM元素<text>上...

fzyz_sb
2016/10/20
75
0
d3.js学习笔记--Mike Bostock: VIZBI: D3 Workshop

Preface d3是基于HTML和SVG的数据可视化JS库. 它将数据(data)和元素(DOM)相互绑定在一起, 并且在数据实时改变情况下DOM元素也会实时改变. 所以, D3是Data-Driven Documents, 即数据驱动元素,...

fzyz_sb
2016/10/23
150
0
【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

其实就是数据和dom元素的一个交互过程 第一阶段是enter进入阶段, 全部数据准备绑定到dom元素 第二阶段是update更新阶段,有一部分数据已经绑定到dom元素了,就表示已经在更新。剩余的数据肯...

黑魔法
2016/11/25
7
0

没有更多内容

加载失败,请刷新页面

加载更多

Java的快速失败和安全失败

一:快速失败(fail—fast) 在用迭代器遍历一个集合对象时,如果遍历过程中对集合对象的内容进行了修改(增加、删除、修改),则会抛出Concurrent Modification Exception。 原理:迭代器在...

狼王黄师傅
14分钟前
3
0
Echarts X轴Y轴配置参数详情

mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:"sans......

wqzbxh
16分钟前
1
0
解决kettle使用JDBC读取Oracle速度慢的问题

jdbc连接添加如下信息: defaultRowPrefetch=20000

了凡川
20分钟前
1
0
Linux学习-1015

8.10 shell特殊符号cut命令 8.11 sort_wc_uniq命令 8.12 tee_tr_split命令 8.13 shell特殊符号下 相关测验题目:题目:http://ask.apelearn.com/question/5437 扩展 扩展 1. source exec 区别...

wxy丶
21分钟前
2
0
Spring Boot核心注解讲解

Spring Boot核心注解讲解 Spring Boot最大的特点是无需XML配置文件,能自动扫描包路径装载并注入对象,并能做到根据classpath下的jar包自动配置。 所以Spring Boot最核心的3个注解就是: 1,...

DemonsI
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部