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 】 选择、插入、删除元素的更多相关文章

  1. 【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素

    在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...

  2. 【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...

  3. 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

    接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...

  4. 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...

  5. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  6. 【 D3.js 入门系列 --- 3 】 做一个简单的图表！

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  7. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  8. 【 D3.js 入门系列 --- 7 】 理解 update, enter, exit 的使用

    在前面几节中反复出现了如下代码: svg.selectAll("rect") .data(dataset) .enter() .append("rect") 当 ...

  9. 【 D3.js 入门系列 --- 5 】 如何添加坐标轴

    第3节中做了一个图标,但没有为它添加一个相应的坐标轴,这样不知道每一个柱形到底有多长.这一节做一个坐标轴. D3中的坐标轴都是以 svg 图的形式出现的,这也是为什么在第3节中要使用 svg 的方法做 ...

随机推荐

  1. 两台linux机器文件传输之scp

    0.写在前面:一定要注意我们是否有源文件的读权限,是否有目标文件夹的写权限!没有的话要先把权限设置好! *.设置权限的方法:切换到有权限操作文件或文件夹的用户,利用chmod命令修改权限 1.安装: ...

  2. 斯坦福 IOS讲义 课件总结 一

    1,引入文件, #import <Foundation/Foundation.h> IOS7 中可以这样写 @import Foundation; 2,在.h文件引入的是公用的,在.m文件 ...

  3. 使用Project进行挣值分析

        挣值分析(EV)技术是一种根据项目的成本基准来度量和分析项目绩效的方法.挣值分析的结果可以指出项目在成本和进度方面存在的偏差.EV分析结合了成本,进度,已完成工作等各种因素来衡量项目的绩效,并 ...

  4. RFID标签天线的三种制作方法

    在RFID标签中,天线层是主要的功能层,其目标是传输最大的能量进出标签芯片.RFID天线是按照射频识别所要求的功能而设计的电子线路,将导电银浆或导电碳浆网印在PVC.PC或PET上,再与面层.保护层和 ...

  5. Maven 版 JPA 最佳实践(转)

    项目结构图 数据库环境 数据库:MySQL 版本:5.x 数据库名:jpa-demo 用户名密码:root/1234 代码清单 1:数据库脚本: ? 1 2 3 4 5 6 7 8 9 10 11 1 ...

  6. Scala函数---既存类型

    语法: Type ::= InfixType ExistentialClauses ExistentialClauses ::= „forSome‟ „{‟ ExistentialDcl {semi ...

  7. <input type="text">文本输人框

    type类型: text  文本框 password  口令密码输人框 reset  重置或清除 buttou  命令按钮 checkbox  复选框 radio  单选框 submit  提交 fi ...

  8. if语句判断身高体重是否标准

    1.判断身高,体重是否标准 Console.WriteLine("请输入您的身高:"); int sg = Convert.ToInt32(Console.ReadLine()); ...

  9. 使用约束给tableview添加暂无数据的提示

    在tableview没有数据的时候,我们经常需要在tableview的正中间插入一张图片,来提示用户暂无数据 /** * 添加一个view,提示暂无数据 */ - (void)addPromptVie ...

  10. vim插件管理之Vundle

    Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性.正是由于其可定制的特性, 许许多多的Vim插件便诞生了.管理这些插件又成为我们最为头疼的问题,最近无 ...