本人的个人博客首页为: 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 】 关于怎样选择,插入,删除元素的更多相关文章

  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.1 】 关于如何选择,插入,删除元素

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

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

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

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

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

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

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

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

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

随机推荐

  1. rsyslog 存储到 mysql

    输出Host1/2的系统日志, 记录到mysql服务器数据库中, 并发布loganalyzer 结构关系如下图: 思路: 通过远程连接mysql, 使得rsyslog的log记录能够写入到mysql中 ...

  2. Python学习————集合的增删查

    可变的数据类型,他里面的元素必须是不可变的数据类型.无序,内容不能重复.应用于去重 增加:set1.add('元素')--->将元素无序的插入集合set1中set1.update("元 ...

  3. pandas 5 导入导出 读取保存 I/O API

    官网The pandas I/O API pickle格式是python自带的 from __future__ import print_function import pandas as pd da ...

  4. 紫书 习题8-10 UVa 1614 (贪心+结论)

    这道题我苦思冥想了一个小时, 想用背包来揍sum/2, 然后发现数据太大, 空间存不下. 然后我最后还是去看了别人的博客, 发现竟然有个神奇的结论-- 幸好我没再钻研, 感觉这个结论我肯定是想不到的- ...

  5. Linux进程管理之状态(二)

    二.进程的生命周期 进程是一个动态的实体,所以他是有生命的.从创建到消亡,是一个进程的整个生命周期.在这个周期中,进程可能会经历各种不同的状态.一般来说,所有进程都要经历以下的3个状态: 就绪态.指进 ...

  6. 用Maven+IDEA+Eclipse组合获得最好的OpenJML体验

    OpenJML+SMTSolver的形式化验证想必大家都已经尝试过了.大家或许体验的更多的是IDEA上命令行输出版本的OpenJML插件,但真正得到官方支持的完全版OpenJML是它的Eclipse版 ...

  7. Linux平台不同解压缩命令的使用方法

    作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells github:https://github.co ...

  8. 【Struts2二】结果集(result-type)

    在jsp/servlet中,结果集一般是指请求转发和重定向这两种. Struts2作为框架,提供了基于这两种的很多其它的结果集! 在struts-default.xml中定义了一些默认的结果集:   ...

  9. C++写的UrlEncode和UrlDecode

    关于UrlEncode的实现(C++).网上有非常多不同的版本号.对须要编码的字符集的选取并不统一.那么究竟有没有标准呢?答案是有的.參见wiki 绝对不编码的,仅仅有字母.数字.短横线(-).下划线 ...

  10. 51nod-1189: 阶乘分数

    [传送门:51nod-1189] 简要题意: 给出一个数n,求出有多少个正整数x,y(0<x<=y)满足$1/n!=1/x+1/y$ 题解: 一开始还以为不可做 结果推一下柿子就会了 $1 ...