【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素
在D3.js中，选择元素的函数有两个：select 和 selectAll 。 先说明一下它们的区别：
- select 是选择所有指定元素的第一个
- selectAll 是选择指定元素的全部（以用于后面同时操作）
- <html>
- <head>
- <meta charset="utf-8">
- <title>select,append,exit</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大小的标题。如果要完成两种选择任务：选择第一个h1 和 同时选择三个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变量选中的元素上色，加上这一句，会发现结果为：
如此，我们可以证明我们选中的是第一个元素。
如果换上代码：
- all_h1.style("color","blue");
会发现三行文字都变成了蓝色。
那么如果想选择第二个h1呢？正如上一节所说的，有两种方法，要么给h1加id，要么用function的形式，详细见上一节。
接下来在body里新插入一个h1。
- var new_h1 = body.append("h1");
- new_h1.text("Append new h1");
这里表示在body里新插入一个h1标签，插入之后返回新插入的元素，再设定文字为Append new h1。
删除一个元素时，对于选择的元素使用remove，如：
- new_h1.remove();
这是删除new_h1变量中选择的元素。
来自：博客首页为： http://www.ourd3js.com/ ，csdn博客首页为：http://blog.csdn.net/lzhlzz/。转载请注明出处，谢谢。
【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素的更多相关文章
- 【 D3.js 入门系列 — 11 】 入门总结
D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
- 【 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 的方法做 ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表！
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
- 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld
下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...
- 【 D3.js 入门系列 --- 0 】 简介和安装
D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...
- 【 D3.js 入门系列 — 2.1 】 选择、插入、删除元素
1. select 和 selectAll 的区别 在 D3 中,选择元素的函数有两个:select 和 selectAll,它们的使用非常重要.先说明一下它们的区别: select 是选择所有指定元 ...
随机推荐
- 15.Linux安装DHCP服务为虚拟机分配IP
参考博客:http://www.jb51.net/article/31607.htm $ rpm -ql dhcp #检查是否安装dhcp $ yum -y install dhcp* ...
- Android ContentProvider 简单学习
当应用继承ContentProvider类,并重写该类用于提供数据和存储数据的方法,就可以向其他应用共享其数据.以前我们学习过文件的操作模式,通过指定文件的操作模式为Context.MODE_WORL ...
- 《BI项目笔记》增量ETL数据抽取的策略及方法
增量抽取 增量抽取只抽取自上次抽取以来数据库中要抽取的表中新增或修改的数据.在ETL使用过程中.增量抽取较全量抽取应用更广.如何捕获变化的数据是增量抽取的关键.对捕获方法一般有两点要求:准确性,能够将 ...
- 学习mongo系列（五） AND,$or,$type
MongoDB OR 条件 MongoDB OR 条件语句使用了关键字 $or,语法格式如下: >db.col.find( { $or: [ {key1: value1}, {key2:valu ...
- 自定义datagridview列,却提示DataGridView 控件中至少有一列没有单元格模板
哈哈,一个小误区,你看看设计窗体生成的代码,DataGridView的列不是GridViewColumn 而是DataGridViewTextBoxColumn你只要添加这个类型的对象就可以了,我也是 ...
- 【转载，整理】域名CNAME解析配置，使用域名B作为域名A的CNAME记录值
最近有个需求,未备案的域名A,想解析到香港 或 国内的服务器上,但是由于未备案,直接使用cdn解析在国内访问会很慢 但是不想直接直接到ip,所以找到两个方法可以解决: 方案一:转移到其他服务器做301 ...
- 新建web工程Jdk怎么不是自己安装的, 是自带的
需要在eclipse中配置默认的jdk环境的,不要用它默认的那个,这个不能用的http://blog.csdn.net/clj198606061111/article/details/11881575 ...
- Laravel登录验证碰到的坑 哈希验证匹配问题
用laravel 写登录验证 本来是用Crypt加密 添加用户到数据库的 后来验证密码 解密时一直报错 The payload is invaild 由于本人是laravel框架小白 自己思考许久未 ...
- C/C++ 如何来自动优雅的涮别银家的贴子
被涮屏涮烦了,就分享一下如何用低调的c/c++来涮别人家的屏吧! 此处埋下三颗雷! 这不是啥新知识,也不是什么浅显的代码.下面,来淘淘这份经验,呼呼 我们要了解Web browser 这个控件,因为到 ...
- eclipse 本地项目提交到远程库以及从远程库中添加项目 ---git
本地项目提交到远程库 1.右击项目->team->share project 2.选择本地库 从远处库中的项目拉到本地 1.右击项目->import项目