文档章节

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

横着走的螃蟹
 横着走的螃蟹
发布于 2015/04/15 15:07
字数 266
阅读 390
收藏 0
点赞 0
评论 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
博文 119
码字总数 29165
作品 0
朝阳
高级程序员
d3.js学习笔记(未完待续)

d3.js和jQuery一样,是链式语法。 d3.js常用方法: 1. d3.select():使用CSS选择器语法从DOM中选择单一元素。 如:d3.select("body"); 2. d3.selectAll():选择所有符合要求的元素。 如:d3....

小微 ⋅ 2013/03/15 ⋅ 5

可视化前端初探(一)--D3.js

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

nightzing ⋅ 2017/12/14 ⋅ 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 ⋅ 0

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

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

qq_34414916 ⋅ 04/22 ⋅ 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 ⋅ 0

【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

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

黑魔法 ⋅ 2016/11/25 ⋅ 0

【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

选择集和数据的关系是 D3 最重要的基础,在【入门 - 第 7 章】时进行过些许讲解,对于要掌握好 D3 是远远不够的。故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工...

黑魔法 ⋅ 2016/11/25 ⋅ 0

为什么用d3.js绘制中国地图只读取json数据最后一个城市的地图

运用d3.js绘制中国地图,可是总是读取了china.json数据的最后一个城市进行绘制,不知道是哪里出了问题,麻烦会的同志们给点提示,我的代码如下: China

huangyu03 ⋅ 2013/11/08 ⋅ 4

d3.js学习笔记--Mike Bostock: Thinking with Joins

我们可以使用append方法, 来创建一个单一元素:

fzyz_sb ⋅ 2016/10/24 ⋅ 0

2D 图表库--Function Plot

Function Plot 是一个基于 D3.js 开发的 2D 图表库,用来绘制各种函数图。 示例代码: functionPlot({ title: 'y = x * x', target: '#linear-with-options', width: 580, height: 400, disa......

红薯 ⋅ 2015/04/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jenkins实践3 之脚本

#!/bin/sh# export PROJ_PATH=项目路径# export TOMCAT_PATH=tomcat路径killTomcat(){pid=`ps -ef | grep tomcat | grep java|awk '{print $2}'`echo "tom...

晨猫 ⋅ 今天 ⋅ 0

Spring Bean的生命周期

前言 Spring Bean 的生命周期在整个 Spring 中占有很重要的位置,掌握这些可以加深对 Spring 的理解。 首先看下生命周期图: 再谈生命周期之前有一点需要先明确: Spring 只帮我们管理单例模...

素雷 ⋅ 今天 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部