1.选择元素的函数
select:返回匹配选择器的第一个元素
selectAll:返回匹配选择器的所有元素
d3.selsct("body)
//选择body标签
d3.select("#id")
//选择id
d3.selectAll("#id")
//选择所有id
d3.select(".class")
//选择class
d3.selectAll(".class")
//选择所有的class
d3.selectAll("ul li");
//选择所有ul中的li元素
var imp = document.getElementById("imp");
d3.select(imp);
//选择DOM API选择的元素
var imps = document.getElementsByName("imp");
d3.selectAll(imps);
//选择DOM API选择的元素
基本上用document.getElementById用select,document.getElementsByName用selectAll.
2.查看状态
d3.select和d3.selectAll返回的对象都是选择集selection
selection.empty(); //判断数据集是否为空
selection.node(); //返回第一个非空元素,如果数据集为空,返回null
selection.size(); //返回数据集中的元素个数
d3.select("circle").attr("cx"); //获取选择集某属性值
selection.classed(name[,value]); //获取选择集的css类
d3.select(“p").classed("red“,true) //开启red类
.classed("bigsize",false); //不开启bigsize类
selection.style(name[,value]); //设定或者获取选择集的样式
d3.select("p").style("color","red").style("font-size","70px");
//文本输入框的value
selection.property(name[,value]); //获取或者设定选择集的属性
<input type="input" id="fname" name="fullname"/>
d3.select("#fname").property("value");
d3.select("#fname").property("value","lisi"); //赋值
//相当于DOM的innerText,不包括元素内的标签
//innerHTML包括元素内的标签
selection.text([value]);
<p> This <span>is</span> a paragraph</p>
//相当于DOM的innerHTML,包括元素内的标签
selection.html([value]);
selection.append(name);
selection.insert(name[,before]);
selection.remove();
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择集</title>
<!-- 引入D3.js库 -->
<script src="http://d3js.org/d3.v3.min.js"
charset="utf-8"></script>
</head>
<body>
<p>Cat</p>
<p id="plane">Plane</p>
<p>Ship</p>
</body>
<script type="text/javascript">
//选择body元素
var body = d3.select("body");
//添加一个P元素,内容为train
body.append("p").text("train");
//在id为plane的元素前添加一个p元素,内容为Bike
body.insert("p","#plane").text("Bike");
//选择id为plane的元素
var plane = d3.select("#plane");
//移除id为plane的元素
plane.remove();
</script>
</html>