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

原文地址:https://www.cnblogs.com/cangqinglang/p/11609296.html

时间: 2024-10-23 00:56:18

D3.js的v5版本入门教程(第五章)—— 选择、插入、删除元素的相关文章

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

D3.js的v5版本入门教程(第九章) 一个完整的柱状图应该包括的元素有——矩形.文字.坐标轴,现在,我们就来一一绘制它们,这章是前面几章的综合,这一章只有少量新的知识点,它们是 d3.scaleBand():这也是一个坐标轴,可以根据输入的domain的长度,等分rangeRound域(类比range域)d3.range():这个比较复杂,建议去看百度(或者官方API),在这里我只讲一下这个返回一个等差数列    1.得到SVG画布 var marge = {top:60,bottom:60,

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

D3.js的v5版本入门教程(第七章) 比例尺在D3.js中是一个很重要的东西,我们可以这样理解d3.js中的比例尺——一种映射关系,从domain映射到range域(为什么会是domain和range呢?等一下你就会看到,因为我们在建立比例尺是常常会用到domain()和range()两个函数,当然不是绝对的,D3中有很多类型的比例尺) 下面介绍在本套教程中常用的两种比例尺 线性比例尺序数比例尺        线性比例尺 domain域和range域都可以连续变化 <body> <sc

D3.js的v5版本入门教程(第十三章)—— 饼状图

D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这里作者本人也只是粗略的讲解每个新知识点的意思!如果不是很理解的话,需要读者自行查看官网API 为了绘制一个饼状图,我们还是需要以下新的知识点 d3.arc( {} ),弧形生成器,用以绘制弧形,需要传入一些用以绘制弧形基本的数据的对象,例如,该对象的属性可以包括(我用官网api的示例) d3.pie

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

D3.js的v5版本入门教程(第十一章) 与图形进行交互操作是很重要的!所谓的交互操作也就是为图形元素添加监听事件,比如说当你鼠标放在某个图形元素上面的时候,就会显示相应的文字,而当鼠标移开后,文字就会消失,或者鼠标单击一下某图形元素就会使它动起来 为了与图形元素进行交互操作,我们还是需要以下新的知识点 on("eventName",function):该函数是添加一个监听事件,它的第一个参数是事件类型,第二个参数是响应事件的内容d3.select(this),选择当前元素    常见

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

D3.js的v5版本入门教程(第十二章) D3中提供了各种制作常见图形的函数,在d3的v3版本中叫布局,通过d3.layout.xxx,来新建,但是到了v5,新建一个d3中基本的图形的方式变了(我也并不知道是不是还叫布局,我觉得也可以这么叫,反正布局指的也是一个绘图函数) 下面是d3中一些常见的部分图形 bubble —— 泡泡图 packing —— 打包图 bundling —— 捆图 force —— 力导向图 chord —— 弦图 pie——饼状图 tree——树状图 中国地图 我们利

D3.js的v5版本入门教程(第八章)—— 坐标轴

D3.js的v5版本入门教程(第八章) D3中没有现成的坐标轴图形,需要我们自己用其他组件拼凑而成.D3中提供了坐标轴组件,使得我们在SVG中绘制一个坐标轴变得像添加一个普通元素那样简单 为了表绘制一个坐标轴,我们还是需要以下新的知识点 call()函数        定义一个坐标轴 坐标轴是有朝向的,在这里我们以向下朝向.水平方向的坐标轴为例,其他朝向的(比如向左朝向的.垂直的坐标轴)类似,这里是接着上一章来的,数据用的也是上一章的 //为坐标轴定义一个线性比例尺 var xScale = d

D3.js的v5版本入门教程(第十章)

在这一章我们干点有趣的事——让我们上一章绘制的图表动起来,这样岂不是很有意思 为了让图表动起来,我们还是需要以下新的知识点 .attr(xxx) .transition() .attr(xxx),transition()表示添加过渡,也就是从前一个属性过渡到后一个属性.duration(2000),表示过渡时间持续2秒.delay(500),表示延迟0.4秒后再进行过渡.ease(d3.easeElasticInOut)表示过渡方式,注意这里和v3版本的区别    有了上面的基础知识后,现在我们

2018-06-21 中文代码示例视频演示Python入门教程第五章 数据结构

知乎原链 续前作: 中文代码示例视频演示Python入门教程第四章 控制流 对应在线文档: 5. Data Structures 这一章起初还是采取了尽量与原例程相近的汉化方式, 但有些语义较偏(如Trondheim的hammer dance). 鉴于这一教程的目的在于使人尽量快速入门Python, 而任何不熟悉的词汇都会加上不必要的负担. 于是最终决定不拘泥于与原例程的"形似", 而采取在例程中使用更为国人熟知的词汇了. 中文代码示例Python入门教程 5.1 列表详述_哔哩哔哩

Storm入门教程 第五章 一致性事务【转】

Storm是一个分布式的流处理系统,利用anchor和ack机制保证所有tuple都被成功处理.如果tuple出错,则可以被重传,但是如何保证出错的tuple只被处理一次呢?Storm提供了一套事务性组件Transaction Topology,用来解决这个问题. Transactional Topology目前已经不再维护,由Trident来实现事务性topology,但是原理相同. 5.1一致性事务的设计 Storm如何实现即对tuple并行处理,又保证事务性.本节从简单的事务性实现方法入手