文档章节

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

横着走的螃蟹
 横着走的螃蟹
发布于 2015/04/15 15:07
字数 266
阅读 398
收藏 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>


© 著作权归作者所有

共有 人打赏支持
横着走的螃蟹
粉丝 15
博文 157
码字总数 36113
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
17分钟前
0
0
《配电网自动化技术》第一章

写了配电网的组成、历程、难点、存在问题、解决方案,还是蛮好的。尤其是各地建设的系统后续又无法实用化,以及多种终端反而增加了运维工作量等,都是目前切实存在的让大家不停吐槽的内容。

max佩恩
22分钟前
0
0

中国龙-扬科
40分钟前
2
0
使用vuex的state状态对象的5种方式

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。 下面给大家来贴一下我的vuex的结构 下面是store文件夹下的state.js和index.js内容 //state.jsconst state =...

peakedness丶
44分钟前
2
0
NetCore MVC Demo

地址:http://114.116.9.72:5411

whltian
51分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部