码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-09-29 19:36:28      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:rem   net   body   tps   插入   end   detail   another   ret   

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版本入门教程(第五章)—— 选择、插入、删除元素

标签:rem   net   body   tps   插入   end   detail   another   ret   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!