1. select 和 selectAll 的区别
在 D3 中，选择元素的函数有两个：select 和 selectAll，它们的使用非常重要。先说明一下它们的区别：
select 是选择所有指定元素的第一个
selectAll 是选择指定元素的全部（用于同时操作）
这两个函数返回的结果称为选择集。
来看一个具体的例子，现有如下代码：
<html>
<head>
<meta charset="utf-8">
<title>select,append,remove</title>
</head>
</style>
<body>
<h1>This is a cat.</h1>
<h1>That is a dog.</h1>
<h1>I like cat.</h1> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script> </script> </body>
</html>
熟悉 HTML 的朋友一定会知道上面的代码输出什么，是三行 h1 大小的标题。
现在要完成两种选择元素的任务：
（1）选择第一个 <h1> 元素
（2）同时选择三个 <h1> 元素
代码如下：
var body = d3.select("body"); //选择body（第一个body，当然也只有一个body）
var h1 = body.select("h1"); //选择第一个h1
var all_h1 = body.selectAll("h1"); //选择所有的h1
为了证明上面的变量 h1 选择的是第一个 <h1> 元素，变量 all_h1 选择的是所有的 <h1> 元素，我们加上一行代码：
h1.style("color","red");
给 h1 变量选中的元素上色，加上这一句后，会发现结果为：
因此，可以证明选中的是第一个 <h1> 元素。
如果换上代码：
all_h1.style("color","blue");
会发现三行文字都变成了蓝色。
那么如果想选择第二个 <h1> 元素呢？正如上一节所说的，有两种方法，要么给 <h1> 加 id ，要么用无名函数 function 的形式，详细见上一章。
2. 插入元素
接下来在 <body> 里新插入一个 <h1> 元素，代码如下
var new_h1 = body.append("h1");
new_h1.text("Append new h1");
这里表示插入一个 <h1> 元素后，将其文字设为 Append new h1，结果为：
3. 删除元素
删除一个元素时，对于选择的元素，使用 remove 即可，代码如下：
new_h1.remove();
这是删除 new_h1 变量中选择的元素。
【 D3.js 入门系列 — 2.1 】 选择、插入、删除元素的更多相关文章
-
【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素
在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...
-
【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...
-
【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
-
【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...
-
【 D3.js 入门系列 — 11 】 入门总结
D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
-
【 D3.js 入门系列 --- 3 】 做一个简单的图表！
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
-
【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld
记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...
-
【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用
在前面几节中反复出现了如下代码: svg.selectAll("rect") .data(dataset) .enter() .append("rect") 当 ...
-
【 D3.js 入门系列 --- 5 】 如何添加坐标轴
第3节中做了一个图标,但没有为它添加一个相应的坐标轴,这样不知道每一个柱形到底有多长.这一节做一个坐标轴. D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做 ...
随机推荐
-
第一章 OO大智慧
今天,正式开始读王涛写的<你必须知道的.NET(第二版)>,刚开始读了序,觉得写的相当精彩,就被吸引住了.看了一会发现本书的特点可能就是以例举例,形象生动,比较期待的样子.虽然前面讲的概念 ...
-
eclipse svn 忽略 target目录 等等... 我用的后边的方法 （转载）
这个build失败的解决方案就是不要把你项目的 target目录放在src repository 里面,还有 .project 和 .classpath 最好也别放到src repository 里. ...
-
shell脚本基础——常用的sed命令举例
一般在实际使用编辑器的过程中 , 常需要执行替换文件中的字符串.移动.删除.与搜寻数据行等等动作.当然 , 一般交互式编辑器(如 vi.emacs)都能做得到上述功能 , 但文件一旦有大量上述编辑需求 ...
-
iOS开发 点击跳转到App Store 或者 点击按钮去评价
//跳转到应用页面 NSString *str = [NSString stringWithFormat:@"http://itunes.apple.com/us/app/id%d" ...
-
BLE简介和Android BLE编程
一．BLE和BT区别 其实我知道许多程序员不太喜欢阅读除了代码以外的文档,因为有时这些过于冗长的文档对编程并没有更多的好处,有了协议,接口,demo差不多很多人就能写出很好质量的代码了.但其实更深入的 ...
-
css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
-
freemarker报错之六
1.错误描述 五月 28, 2014 10:32:40 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...
-
pwnable.kr col
collision - 3 pt 连接上查看col.c源码 分析一下代码, 1.hashcode等于一个固定的值 2.check_password函数取输入数据,4个一组,将输入的字符转成int,然后 ...
-
[大数据从入门到放弃系列教程]第一个spark分析程序
[大数据从入门到放弃系列教程]第一个spark分析程序 原文链接:http://www.cnblogs.com/blog5277/p/8580007.html 原文作者:博客园--曲高终和寡 **** ...
-
Linux上VsCode编译打包运行
前提:最好使用root用户可以排除一些不必要的错误. 一. 准备环境 Node.js(>= 8.12.0, < 9.0.0) Python2.7 Yarn(可以通过npm install ...