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 的元素
----------------
来源: http://www.bubuko.com/infodetail-3218747.html