D3.js的v5版本入门教程（第三章）
在D3.js中，选择元素和绑定元素是最基本的内容，也是很重要的内容，等你看完整个教程后你会发现，这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的
1、选择元素
在D3.js中，选择元素的函数有两个
d3.select()
d3.selectAll()
这两个函数返回的就是选择集
常见的用法如下：
var body = d3.select("body");//选择文档中的body元素
var svg = body.select("svg");//选择body中的svg元素
var p = body.selectAll("p");//选择body中所有的p元素
var p1 = body.select("p");//选择body中第一个p元素
2、绑定数据
D3.js能将数据绑定到 DOM 上，也就是绑定到文档上。例如，如果网页中有一个P元素和一个整数5，我们就将数据5和p绑定在一起。绑定之后，当需要依靠这个数据才操作某元素的时候，使用起来会很方便！（或许这样说还是会使你一头雾水，没关系，通过后面的章节你就会慢慢明白，因为后面的章节的js代码是在这个基础上编写的）
D3.js中绑定数据的两个函数
data()：讲一个数组绑定到选择集上，数组各项和选择集各元素绑定，也就是一一对应的关系（这里或许敏锐的你会发现问题，下一章节讲）
datum()：将一个数据绑定到所有选择集上
相比较而言，data()较常用
datum()的使用
<body>
<p>dog</p>
<p>cat</p>
<p>pig</p> <script>
var str = "is an animal";//新建一个字符串
var p = d3.select("body")
.selectAll("p"); p.datum(str)//绑定
.text(function(d,i){
return "第"+i+"个元素"+d;
});
</script>
</body>
运行结果：
代码说明：
-可以发现，本段代码的作用是将str这个字符串绑定代三个<p>选择集上，然后通过一个无名函数function(d,i)，访问到绑定的元素。（function(d,i)，这样的函数后面会经常出现，其中d代表数据，也就是与某元素绑定的数据，i代表索引，代表数据的索引，从0开始）
data()的使用
<body>
<p>dog</p>
<p>cat</p>
<p>pig</p> <script>
var dataset = ["so cute","cute","fat"];
var p = d3.select("body")
.selectAll("p"); p.data(dataset)
.text(function(d,i){
return "第"+i+"个动物"+d;
});
</script>
</body>
运行结果：
代码说明：
-其实和datum()大体一样，只不过现在是数组元素和选择集有着对应关系
————————————————
版权声明：本文为CSDN博主「数星星等天明」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34414916/article/details/80026813
D3.js的v5版本入门教程（第三章）—— 选择元素和绑定数据的更多相关文章
-
D3.js的v5版本入门教程（第九章）——完整的柱状图
D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...
-
D3.js的v5版本入门教程（第十三章）—— 饼状图
D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...
-
D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形
D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...
-
D3.js的v5版本入门教程（第十一章）——交互式操作
D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...
-
D3.js的v5版本入门教程（第八章）—— 坐标轴
D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一 ...
-
D3.js的v5版本入门教程（第七章）—— 比例尺的使用
D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和rang ...
-
D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素
D3.js的v5版本入门教程(第五章) 1.选择元素 现在我们已经知道,d3.js中选择元素的函数有select()和selectAll(),下面来详细讲解一下 假设我们的<body>中有 ...
-
D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit
D3.js的v5版本入门教程(第四章) Update.Enter.Exit是D3.js中很重要的概念,下面来讲一下它们到底是什么?(当你看完后.你就会知道如果数据集个数和选择集个数不匹配的情况下使用d ...
-
D3.js的v5版本入门教程（第十章）
在这一章我们干点有趣的事——让我们上一章绘制的图表动起来,这样岂不是很有意思 为了让图表动起来,我们还是需要以下新的知识点 .attr(xxx) .transition() .attr(xxx),tr ...
随机推荐
-
JavaScript第一天 改变DIV的样式
onmouseover 当鼠标移到这个对象之上时响应 onmouseout 当鼠标移出这个对象之上时响应 document.getElementById('id') 获取id的元素并可以做一些操作 ...
-
iOS-多线程--(pthread/NSThread/GCD/NSOperation)--总结
零.线程的注意点(掌握) .不要同时开太多的线程(~3条线程即可,不要超过5条) .线程概念 > 主线程 : UI线程,显示.刷新UI界面,处理UI控件的事件 > 子线程 : 后台线程,异 ...
-
POJ 1002	487-3279
A - 487-3279 Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit ...
-
《Java程序性能优化》学习笔记 JVM和并发优化
第四章 并行程序优化 1.非阻塞同步避免了基于锁的同步的缺陷,无锁算法没有锁竞争带来的系统开销,也没有线程间频繁调度带来的开销.CAS算法:包含3个参数CAS(v,e,n).V表示要更新的变量,E表示 ...
-
BZOJ3696 化合物
我们可以树形dp... 令f[p][d]表示以p为根的子树,与p距离为d的结点数 然后我们计算答案: 一种是从某个节点q到根p的方案,对和为d的贡献是1 另一种是p的一个子树中的节点x到另一个子树中的 ...
-
问题 K: 【USACO2012Feb】植草 {Bronze题2}
按着矩形周长的思路,到当前边的时候,前一层的覆盖数乘以高度加入 ans 就行,然而真正的算法可能并不是这个..只能想到这个了 ; type node=record l,r,mid,sum,delta: ...
-
[NYOJ 15] 括号匹配（二）
括号匹配(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:6 描述 给你一个字符串,里面只包含"(",")","[&qu ...
-
Express使用html模板
express默认使用jade模板,可以配置让其支持使用ejs或html模板. 1. 安装ejs 在项目根目录安装ejs. npm install ejs 2.引入ejs var ejs = requ ...
-
大约php，mysql，html数字寻呼和文本分页2分页样式供大家参考
做盗版.转载请添加源http://blog.csdn.net/yanlintao1 请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 首先进行样式展示希望对大家有 ...
-
模块化开发AraeRegistration
.NET/ASP.NET MVC(模块化开发AraeRegistration) 阅读目录: 1.开篇介绍 2.AreaRegistration注册路由(传递路由上下文进行模块化注册) 1]开篇介绍 A ...