在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. JQuery对表格进行排序

    添加相关jar <script type="text/javascript" src="jquery-1.1.3.pack.js"></scr ...

  2. div 一段时间后自动隐藏

    一.div弹出后自动消失 这里并没有删除 setTimeout(function(){$(".alert").hide();},2000); 直接在js文件中需要的地方添加执行这段 ...

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

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

  4. Git实现从本地添加项目到远程仓库

    Git是现在最流行的版本控制系统之一了,今天也试试了,成功了上传了远程仓库,接下来看看我是怎么做的. (ps:七牛抓取不到图片,请移步:http://blog.csdn.net/u011043843/ ...

  5. JavaEE开发环境搭建（2）---（MySQL的安装）

    上次写了JavaEE开发环境搭建之jdk的安装...然后自己看的时候感觉有时候加载图片不是很流畅,所以这次就少添加点图片了~~ JavaEE开发环境搭建之MySQL的安装 1:mysql 的下载 在百 ...

  6. features block

    很轻松就能把一个新建的block导出到一个module包里.

  7. break和continue的区别

    break是结束整个循环体,continue是结束单次循环

  8. [原创]C#按比例缩放窗体控件及字体

    按照比例缩放窗体控件及字体,如需等比例缩放,只需将x,y的比例设置成相同即可. 为了减小误差,建议使用原始尺寸来计算比例. private float X, Y; private bool b = f ...

  9. nginx 负载均衡、用数据库存储Session，来实现多站点共享Session[转]

    多站点共享Session常见的作法有: 1.使用.net自动的状态服务(Asp.net State Service); 2.使用.net的Session数据库: 3.使用Memcached. 4.使用 ...

  10. spring boot注解 --@EnableAsync 异步调用

    EnableAsync注解的意思是可以异步执行,就是开启多线程的意思.可以标注在方法.类上. @Component public class Task { @Async public void doT ...