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

D3.js的v5版本入门教程（第五章）

1、选择元素

现在我们已经知道，d3.js中选择元素的函数有select()和selectAll()，下面来详细讲解一下

假设我们的<body>中有三个，如下

    <p>dog</p>
    <p>cat</p>
    <p>pig</p>
    <p>rat</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>

注意这里更改了两个的属性，第二个加了class属性，访问时使用 .myP2（前面加点），第三个加了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>这个元素，然后在其内部的最后添加一个新的

insert()

var p = d3.select("body")
    		.insert("p","#myP3")
    		.text("insert an animal")
    		.style("color","red");

运行结果：

代码说明：

-.insert("p","#myP3")表示在属性id为myP3的元素前面插入一个新的元素，前面我们已经知道，我们将第三个元素的属性id设为myP3，（pig），所以结果正确

3、删除元素

删除元素很简单，对于选择的元素，使用remove();即可

var p = d3.select("body")
    		.select("#myP3")
    		.remove();

代码说明：

-这样就是删除了属性id为myP3的元素

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

猜你喜欢