D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素
D3.js的v5版本入门教程（第五章）
1、选择元素
现在我们已经知道，d3.js中选择元素的函数有select()和selectAll()，下面来详细讲解一下
假设我们的<body>中有三个<p>，如下
<p>dog</p>
<p>cat</p>
<p>pig</p>
<p>rat</p>
选择第一个元素<p>
var p = d3.select("body")
.select("p");
p.style("color","red");
运行结果：
代码说明：
-var p = d3.select("body")
.select("p");注意这里用的是select("p")而不是selectAll。
-p.style("color","red");这里是为text添加样式，设置颜色为红色
选择全部元素
var p = d3.select("body")
.selectAll("p");
p.style("color","red");
运行结果：
代码说明：
-也就是把select("p")改成selectAll("p")就好
选择任意元素
这需要改一下元素的属性，如下
<p>dog</p>
<p class="myP2">cat</p>
<p id="myP3">pig</p>
<p>rat</p>
注意这里更改了两个<p>的属性，第二个<p>加了class属性，访问时使用 .myP2（前面加点），第三个<p>加了id属性，访问时使用#myP3（前面加#），下面演示
var p = d3.select("body")
.selectAll(".myP2");
p.style("color","red");
运行结果：
代码说明：
-这里也就是根据元素的属性——class属性来选择特定的元素，（id属性用法类似）
选择任意元素（扩展）
利用function(d,i)来选择特定元素，因为我们已经知道i在这里代表的索引号，那么可以利用条件语句来选择我们需要的元素，如：
var dataset = [3,6,9,12];
var p = d3.select("body")
.selectAll("p")
.data(dataset)
.text(function(d,i){
if(i==3){
d3.select(this).style("color","red");
}
return d;
})
运行结果：
代码说明：
-if(i==3){ d3.select(this).style("color","red"); }由这里可以看出，我们选择的是第4个元素
-var p = d3.select("body")
.selectAll("p")
.data(dataset)
.text(function(d,i))你可能已经之一到这样的形式语法——链式语法，在D3.js中经常用到
2、插入元素
D3.js中涉及两种插入函数
append()：在选择集尾部插入元素
insert()：在选择集前面插入元素
append()
var p = d3.select("body")
.append("p")
.text("another animal")
.style("color","red");
运行结果：
代码说明：
-也就是先选择<body>这个元素，然后在其内部的最后添加一个新的<p>
insert()
var p = d3.select("body")
.insert("p","#myP3")
.text("insert an animal")
.style("color","red");
运行结果：
代码说明：
-.insert("p","#myP3")表示在属性id为myP3的元素前面插入一个新的元素<p>，前面我们已经知道，我们将第三个<p>元素的属性id设为myP3，（pig），所以结果正确
3、删除元素
删除元素很简单，对于选择的元素，使用remove();即可
var p = d3.select("body")
.select("#myP3")
.remove();
代码说明：
-这样就是删除了属性id为myP3的元素
————————————————
版权声明：本文为CSDN博主「数星星等天明」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34414916/article/details/80028630
D3.js的v5版本入门教程（第五章）—— 选择、插入、删除元素的更多相关文章
- D3.js的v5版本入门教程（第九章）——完整的柱状图
D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...
- D3.js的v5版本入门教程（第十三章）—— 饼状图
D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...
- D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形
D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...
- D3.js的v5版本入门教程（第十一章）——交互式操作
D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...
- D3.js的v5版本入门教程（第八章）—— 坐标轴
D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一 ...
- D3.js的v5版本入门教程（第七章）—— 比例尺的使用
D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和rang ...
- D3.js的v5版本入门教程（第三章）—— 选择元素和绑定数据
D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 ...
- D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit
D3.js的v5版本入门教程(第四章) Update.Enter.Exit是D3.js中很重要的概念,下面来讲一下它们到底是什么?(当你看完后.你就会知道如果数据集个数和选择集个数不匹配的情况下使用d ...
- D3.js的v5版本入门教程（第十章）
在这一章我们干点有趣的事——让我们上一章绘制的图表动起来,这样岂不是很有意思 为了让图表动起来,我们还是需要以下新的知识点 .attr(xxx) .transition() .attr(xxx),tr ...
随机推荐
- AS shortcuts
stl => statelessstf => statefulalt+enter, select element => add pading or somethingselect c ...
- spring中bean的作用域属性singleton与prototype的区别
1.singleton 当一个bean的作用域设置为singleton, 那么Spring IOC容器中只会存在一个共享的bean实例,并且所有对bean的请求,只要id与该bean定义相匹配,则只会 ...
- INTERVAL 用法 mysql
原文:https://blog.csdn.net/sqlquan/article/details/82699237 做个例子描述吧,也许更易于理解. 准备: 1.建表 create table INT ...
- 英语Petrolaeum原油
Petrolaeum (英语单词) Petrolaeum是一个英语单词,名词,翻译为石油. 中文名:石油 外文名:petrolaeum,petroleum 目录 1 含义 2 例句 含义 petrol ...
- GDI显示图像时设定窗口大小为图像大小
先前已经能基于GDI显示png图像,但是窗口大小和图像尺寸并不一致.注意到opencv中的imshow的窗口和图像尺寸一致,这里进行设置. 原理 CreateWindow阶段并不能确定窗口大小,但是在 ...
- ng add ng-zorro-antd 安装时报错 已经是管理员还需要权限Error: EPERM: operation not permitted, lstat 'C:\ngWorkspace\qd\node_modules\fsevents\node_modules'
Error: EPERM: operation not permitted, lstat 'C:\ngWorkspace\qd\node_modules\fsevents\node_modules' ...
- Vue命名规范
views 命名 views 文件夹下面是由 以页面为单位的vue文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components.assets 同级. views 下的文件夹命名 v ...
- 如何解决IntelliJ idea的maven工程提示的Cannot Resolve Symbol
IDEA无法识别一个类类,将其显示为红色,如果 compile 没有问题.鼠标放上去后显示 “Cannot resolve symbol XXX”,有两种解决方式:(1)点击菜单中的 “File” - ...
- storm整合kafka storm-kafka-client
pom.xml-注意jar-log4j---------------------<dependencies> <dependency> <groupId>org.a ...
- The Shortest Statement(Educational Codeforces Round 51 (Rated for Div.2)+最短路+LCA+最小生成树)
题目链接 传送门 题面 题意 给你一张有\(n\)个点\(m\)条边的联通图(其中\(m\leq n+20)\),\(q\)次查询,每次询问\(u\)与\(v\)之间的最短路. 思路 由于边数最多只比 ...