D3.js的v5版本入门教程（第五章）—— 选择插入删除元素
Posted 苍青浪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
喜欢这篇文章？欢迎打赏~~
以上是关于D3.js的v5版本入门教程（第五章）—— 选择插入删除元素的主要内容，如果未能解决你的问题，请参考以下文章