1 选择元素
D3选择元素的函数有两个:select和selectAll
- select:返回匹配选择器的第一个元素
- selectAll:返回匹配选择器的所有元素
这里的选择器指的是CSS选择器。
select和select All函数中传递的参数有两种:
- CSS选择器:
d3.select("body");
d3.select("#important");
d3.select(".content");
d3.selectAll("p");
d3.select(".content");
d3.select("ul li"); - 已经被DOM API选择的元素(不推荐)
var important = document.getElementById("important");
d3.select(important);
var content = document.getElementByClassName("content");//使用DOM选择类为content的元素集
//如果使用select,达不到选择第一个元素的效果
d3.select(content);
//以下是正确的使用方法
d3.selectAll(content);
另:如果要选择body中的所有p元素,除了使用CSS的派生选择器作为参数之外,还可以采用“连缀语法”。
d3.select("body").selectAll("p");
2 选择集
select和selectAll函数返回的对象称为选择集(selection),添加、删除、设定网页中的元素,都得使用选择集。
2.1 查看状态
查看选择器的函数共有三种:
- selection.empty()
如果选择集为空,返回true;不为空,返回false。 - selection.node()
返回第一个非空元素,如果选择集为空,返回null。 - selection.size()
返回选择集中的元素个数。
<body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <script> var p = d3.selectAll("p"); console.log(p.empty());//false console.log(p.node());//<p>段落1</p> console.log(p.size());//3 </script> </body>
2.2 设定和获取属性
设定和获取选择集属性的函数共6个:
- selection.attr(name[,value])
设定或获取选择集的属性,name是属性名称,value是属性值。如果省略value,则返回当前的属性值;如果不省略,则将属性name的值设置为value。
d3.select("p").attr("id","para");
- selection.classed(name[,value])
设定或获取选择集的CSS类,name是类名,value是一个布尔值。布尔值表示该类是否开启,当布尔值为true时,开启对应的类,元素标签添加class="classname";当布尔值为false时,标签中不会添加任何属性。如果省略第二个参数value,返回一个布尔值,表示该类是否开启。
//四种写法 .classed("red",true); .classed({"red":true,"blue":true}); .classed("red",true); .classed("red blue",true); //省略第二个参数 .classed("red");//返回true或false
-
selection.style(name[,value[,priority])
设定或获取选择集的样式,name是样式名,value是样式值。如果只保留第一个参数,则返回该样式的值。d3.select("p") .style("color","red") .style("font-size","30px"); //或者以下写法 d3.select("p") .style({"color":"red","font-size":"30px"})
元素标签将添加如下属性:
<p style="color: red;font-size:30px;"></p>
-
selection.property(name[,value])
设定或获取选择集的属性,name是属性名,value是属性值。如果省略value,则返回匹配的第一个非空元素的属性值。
有部分属性不能用attr()来设定和获取,例如input的value属性,在input中输入字符test,标签中并不会添加value="test",这种情况就要使用property()。d3.select("#fname").property("value"); d3.select("#fname").property("value","ZhangSan");
- selection.text([value])
设定或获取选择集的文本内容,如果省略value,则返回当前文本的内容。文本内容相当于DOM的innerText,不包括元素内部的标签。
<p>This <span>is</span> a 段落</p>
console.log(d3.select("p").text());//This is a 段落
- selection.html([value])
设定或获取选择集定内部HTML内容,相当于DOM的innerHTML,包括元素内部的标签。
<p>This <span>is</span> a 段落</p>
console.log(d3.select("p").html());//This <span>is</span> a 段落
3 添加、插入和删除
我们可以为选择集添加、插入和删除元素。
- selection.append(name)
在选择集的末尾添加一个元素,name为元素名称。 - selection.insert(name[,before])
在选择集中指定元素之前插入一个元素,name是被插入的元素名称,before是CSS选择器名称。 - selection.remove()
删除选择集中的元素
<body> <p>Car</p> <p id="plane">Plane</p> <p>Ship</p> <script> var body = d3.select("body");//选择body元素 //在body元素中所有元素的末尾处添加一个p元素,内容为Train body.append("p").text("Train"); //在body中id为plane的元素前添加一个p元素,内容为Bike body.insert("p","plane").text("Bike"); //选择id为plane的元素 var plane = d3.select("#plane"); //删除id为plane的元素 plane.remove(); </script> </body>