在D3.js中，选择元素的函数有两个：select 和 selectAll 。 先说明一下它们的区别：

  • select 是选择所有指定元素的第一个
  • selectAll 是选择指定元素的全部（以用于后面同时操作）
 
来看一个具体的例子，现有如下代码：
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>select,append,exit</title>
  5. </head>
  6. </style>
  7. <body>
  8. <h1>This is a cat.</h1>
  9. <h1>That is a dog.</h1>
  10. <h1>I like cat.</h1>
  11. <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  12. <script>
  13. </script>
  14. </body>
  15. </html>

熟悉HTML的朋友一定会知道上面的代码输出什么，是三行h1大小的标题。如果要完成两种选择任务：选择第一个h1 和 同时选择三个h1 。

代码如下：

  1. var body = d3.select("body");           //选择body（第一个body，当然也只有一个body）
  2. var h1 = body.select("h1");             //选择第一个h1
  3. var all_h1 = body.selectAll("h1");      //选择所有的h1

为了证明上面的变量h1选择的是第一个h1，all_h1选择的是所有的h1，我们加上代码：

  1. h1.style("color","red");

给h1变量选中的元素上色，加上这一句，会发现结果为：

如此，我们可以证明我们选中的是第一个元素。

如果换上代码：

  1. all_h1.style("color","blue");

会发现三行文字都变成了蓝色。

那么如果想选择第二个h1呢？正如上一节所说的，有两种方法，要么给h1加id，要么用function的形式，详细见上一节。

接下来在body里新插入一个h1。

  1. var new_h1 = body.append("h1");
  2. new_h1.text("Append new h1");

这里表示在body里新插入一个h1标签，插入之后返回新插入的元素，再设定文字为Append new h1。

删除一个元素时，对于选择的元素使用remove，如：

  1. new_h1.remove();

这是删除new_h1变量中选择的元素。

来自：博客首页为： http://www.ourd3js.com/  ，csdn博客首页为：http://blog.csdn.net/lzhlzz/。转载请注明出处，谢谢。

【 D3.js 入门系列 --- 2.1 】 关于如何选择，插入，删除元素的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

    下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...

  8. 【 D3.js 入门系列 --- 0 】 简介和安装

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  9. 【 D3.js 入门系列 — 2.1 】 选择、插入、删除元素

    1. select 和 selectAll 的区别 在 D3 中,选择元素的函数有两个:select 和 selectAll,它们的使用非常重要.先说明一下它们的区别: select 是选择所有指定元 ...

随机推荐

  1. PDO数据库抽象层

    PDO的优势在于兼容性,但速度不如mysql和mysqli new PDO($dsn,$username,$passwd［,$options］) $options可以设置数据库连接属性,如: $opt ...

  2. php: 学习记录

    1.get_object_vars($obj) 获取对象$obj的属性数组 2.类和对象 <?php // 类和对象 echo "类和对象" . "\n" ...

  3. HTML基础（1）

    1.前端开发语言介绍 HTML(Hypertext Markup Language)—— 结构—— 超文本标记语言 CSS(Cascading Style Sheets)—— 样式—— 层叠样式表 J ...

  4. 视频播放器之————JW Player参数详解

    JW Player参数详解 1,安装 下载后,你可以得到一个例子,当用文本或HTML编辑器打开的时候,你可以发现swf是用一段短小的 javascript嵌入到页面上的.这个Javascript是Ge ...

  5. mysql5.x(<7) sql文件导入到5.7

    一.修改sql—model http://www.linuxidc.com/Linux/2016-09/135372.htm

  6. 使用mvn插件执行工程单元测试OOM的解决办法

    在执行mvn test时,maven会启动一个fork进程来运行所有的单元测试类,所以我需要设置的是这个fork进程的jvm参数. 不过最终还是让我找到了http://maven.apache.org ...

  7. 0030 Linux 网络操作命令

    1. 主机是否可达 ping IP 2. 服务是否在运行 telnet IP port 3. 网络配置 ifconfig ip route arp 4. 网络访问 curl wget 5. 网络追踪 ...

  8. Hibernate 测试分析 好多题都是没认真看题错了。

    此题目考查的是对Hibernate中交叉连接的理解.HQL支持SQL风格的交叉连接查询,交叉连接适用于两个类之间没有定义任何关联时.在where字句中,通过属性作为筛选条件,如统计报表数据.使用交叉连 ...

  9. iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局

    iOS开发UI篇—使用xib自定义UItableviewcell实现一个简单的团购应用界面布局 一.项目文件结构和plist文件 二.实现效果 三.代码示例 1.没有使用配套的类,而是直接使用xib文 ...

  10. IT自学论坛

    http://yun.baidu.com/share/home?uk=4113898546&view=share#category/type=0