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版本入门教程（第五章）—— 选择、插入、删除元素的更多相关文章

  1. D3.js的v5版本入门教程（第九章）——完整的柱状图

    D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBa ...

  2. D3.js的v5版本入门教程（第十三章）—— 饼状图

    D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这 ...

  3. D3.js的v5版本入门教程（第十二章）—— D3.js中各种精美的图形

    D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并 ...

  4. D3.js的v5版本入门教程（第十一章）——交互式操作

    D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就 ...

  5. D3.js的v5版本入门教程（第八章）—— 坐标轴

    D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一 ...

  6. D3.js的v5版本入门教程（第七章）—— 比例尺的使用

    D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和rang ...

  7. D3.js的v5版本入门教程（第三章）—— 选择元素和绑定数据

    D3.js的v5版本入门教程(第三章) 在D3.js中,选择元素和绑定元素是最基本的内容,也是很重要的内容,等你看完整个教程后你会发现,这些D3.js教程都是在选择元素和绑定元素的基础上展开后续工作的 ...

  8. D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit

    D3.js的v5版本入门教程(第四章) Update.Enter.Exit是D3.js中很重要的概念,下面来讲一下它们到底是什么?(当你看完后.你就会知道如果数据集个数和选择集个数不匹配的情况下使用d ...

  9. D3.js的v5版本入门教程（第十章）

    在这一章我们干点有趣的事——让我们上一章绘制的图表动起来,这样岂不是很有意思 为了让图表动起来,我们还是需要以下新的知识点 .attr(xxx) .transition() .attr(xxx),tr ...

随机推荐

  1. HDU2476 String painter(DP)

    题目 String painter 给出两个字符串s1,s2.对于每次操作可以将 s1 串中的任意一个子段变成另一个字符.问最少需要多少步操作能将s1串变为s2串. 解析 太妙了这个题,mark一下. ...

  2. 关于AWK的10个经典案例

    awk是Linux系统下一个处理文本的编程语言工具,能用简短的程序处理标准输入或文件.数据排序.计算以及生成报表等等,应用非常广泛.基本的命令语法:awk option 'pattern {actio ...

  3. 必须修改getdate()格式，判断是否处于两个日期之间

    ), ) ), )<= 周次结束日期 ), ) -- 这样的格式结果为:2019-09-01 --如果不进行转换,查出来含有日期和时间,否则两个边界无法查询出来

  4. java中的参数传递

    Java中只有传值调用(值传递),没有传址调用(址传递或者引用传递).所以在java方法中改变参数的值是不会改变原变量的值的,但为什么改变引用变量的属性值却可以呢?请看下面的解答. java中的数据类 ...

  5. 嵌入式 vlc从接收到数据流到播放视频的过程分析（经典）

    个人整理: Vlc流播放流程 vlc源码目录树: 目录名称 说明 bindings Java, CIL 和Python绑定 doc 帮助文档 (不是更新的) extras 另叙. include VL ...

  6. java系统化基础-day01-基础语法知识

    1.学前必看 该课程将系统化的讲解java基础,但是该课程并不适合零基础的学员,因为在整个java学习体系中我们是按照实际生产设计, 主体思路是以完成某个业务为主线,用到什么技术就学什么技术,即带着问 ...

  7. centos7下使用x11远程带窗口安装Oracle

    目录 centos7静默安装oracle11gR2 文章目录 一.检查硬件要求 1.内存要求: 2.安装包: 二.环境准备 1.安装必要的工具 2.关闭防火墙 3.关闭Selinux 4.安装Orac ...

  8. Trunk 实现跨交换机 VLAN 通信

    当网络中有多台交换机时,位于不同交换机上的相同VLAN的主机之间时如何通信的呢?我们使用Trunk实现跨交换机VLAN通信.还有以太网通道的操作哦. 实验拓扑 两台交换机直连,每台下面再连接两台VPC ...

  9. vue父组件触发子组件方法

    比如应用场景是弹窗中的组件,想要点弹窗时更新该组件展示对应记录的的值 methods: { edit (record) { this.mdl = Object.assign({}, record) t ...

  10. Docker CMD ENTRYPOING 和Kubernetes command args对比

    Docker CMD ENTRYPOING 和Kubernetes command args对比 exec 模式 使用 exec 模式时,容器中的任务进程就是容器内的 1 号进程 shell 模式 使 ...