【 D3.js 入门系列 --- 2.1 】 关于怎样选择，插入，删除元素
本人的个人博客首页为： http://www.ourd3js.com/ ，csdn博客首页为：http://blog.csdn.net/lzhlzz/。
转载请注明出处，谢谢。
在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变量中选择的元素。
【 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.1 】 关于如何选择，插入，删除元素
在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...
- 【 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 是选择所有指定元 ...
随机推荐
- hiho1079 - 数据结构 线段树(入门题,离散化)
题目链接 描述 小Hi和小Ho在回国之后,重新过起了朝7晚5的学生生活,当然了,他们还是在一直学习着各种算法~ 这天小Hi和小Ho所在的学校举办社团文化节,各大社团都在宣传栏上贴起了海报,但是贴来贴去 ...
- dispatch_group_t踩过的坑
如果想在dispatch_queue中所有的任务执行完成后在做某种操作,在串行队列中,可以把该操作放到最后一个任务执行完成后继续,但是在并行队列中怎么做呢.这就有dispatch_group 成组操作 ...
- NetworkX-根据权重画图
load_data = sio.loadmat(load_path) #阈值处理 mat=np.array(load_data['R']) mat[mat<0]=0 mat[mat<0.4 ...
- 创建一个 Django 项目
一. 创建项目 其中: 确认项目是否创建成功: 在 manage.py 目录上运行 python manage.py runserver server 启动后,在浏览器访问 http://127.0. ...
- oracle查询之null值转化
函数coalesce(c1,c2,c3......cn);返回第一个不为null的值
- 洛谷P4994 终于结束的起点
希望是这道题的第一篇题解,并且真的做到了! upd 2018/11/4:规律补锅,让代码更加易懂 本来月赛时想打个表,打到一半,发现\(n\)稳定在\(m\)附近? 题目的意思是\(n < m ...
- 传纸条 NOIP2008 洛谷1006 二维dp
二维dp 扯淡 一道比较基本的入门难度的二维dp,类似于那道方格取数,不过走过一次的点下次不能再走(看提交记录里面好像走过一次的加一次a[i][j]的也AC了,,),我记得当年那道方格取数死活听不懂, ...
- Node.js能够做什么？
正如 JavaScript 为client而生.Node.js 为网络而生.Node.js 能做的远不止开发一个网 站那么简单,使用 Node.js,你能够轻松地开发: 具有复杂逻辑的站点: ...
- JS学习笔记-数据类型
最初的JS学习已经过去大半年的时间了,至此感觉对JS的使用与理解并非非常深入,因此在近期的工作之余也開始了新一轮的JS学习. 几天时间过去了,对于一些基础内容的学习还是非常有必要的,就从今天的又一次整 ...
- ubuntu SDK 安装
纯净sdk安装1.地址-http://gmirror.org/#android-sdk-tools-only(国内镜像)2.下载到本地目录 ~/下载3.进入下载,解压 tar -zxvf androi ...