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


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

D3.js的v5版本入门教程(第三章)—— 选择元素和绑定数据知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。