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