选择器

选择元素

函数	返回值
select()	匹配的第一个元素
selectAll()	匹配的所有元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>D3</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" />
		<script src="js/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/d3/d3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<h1>D3 选择器</h1>
			
			<div id="success" class="alert alert-success" role="alert">
				Well done!
			</div>
			<div id="info" class="alert alert-info" role="alert">
				Heads up!
			</div>
			<div id="warning" class="alert alert-warning" role="alert">
				Warning!
			</div>
			<div id="danger" class="alert alert-danger" role="alert">
				Oh snap!
			</div>			
			<ul>
				<li>l1</li>
				<li>l2</li>
				<li>l3</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		//-----select------
		body = d3.select("body");
		success = d3.select("#success");
		alert = d3.select(".alert");
		
		//-----selectAll------
		divs = d3.selectAll("div");
		alerts = d3.selectAll(".alert");
		lis = d3.selectAll("ul li")
		
		//-----连缀语法------
		divs2 = d3.select("body").selectAll("div");
		
		console.log(body);
		console.log(success);
		console.log(alert);
		console.log(divs);
		console.log(alerts);
		console.log(lis);
		console.log(divs2);
		console.log(alerts.empty())
	</script>
</<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>D3</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.min.css" />
		<script src="js/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/d3/d3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<h1>D3 选择器</h1>
			
			<div id="success" class="alert alert-success" role="alert">
				Well done!
			</div>
			<div id="info" class="alert alert-info" role="alert">
				Heads up!
			</div>
			<div id="warning" class="alert alert-warning" role="alert">
				Warning!
			</div>
			<div id="danger" class="alert alert-danger" role="alert">
				Oh snap!
			</div>			
			<ul>
				<li>l1</li>
				<li>l2</li>
				<li>l3</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		//-----select------
		body = d3.select("body");
		success = d3.select("#success");
		alert = d3.select(".alert");
		
		//-----selectAll------
		divs = d3.selectAll("div");
		alerts = d3.selectAll(".alert");
		lis = d3.selectAll("ul li")
		
		//-----连缀语法------
		divs2 = d3.select("body").selectAll("div");
		
		console.log(body);
		console.log(success);
		console.log(alert);
		console.log(divs);
		console.log(alerts);
		console.log(lis);
		console.log(divs2);
		console.log(alerts.empty())
	</script>
</html>

选择集属性

选择器返回结果即为选择集

函数	返回值
selection.empty()	选择集为空，返回Ture，反之亦然
selection.node()	选中集非空，返回第一个非空元素，选择集为空，返回null
selection.size()	选中集的元素个数

选择集操作

函数	参数	返回值
selection.attr(name,value)	name：属性名 value：属性值	value为空时，返回当前属性值 Value非空是，设置name属性改为value值
selection.classed(name,value) selection.classed{“name1”：true，“name2”，false})	name：类名 value：布尔值	value为空时，返回当前类的布尔值 Value非空是，设置name类名改为value值
selection.style(name,value)	name：样式名 value：样式值	value为空时，返回当前样式值 Value非空是，设置name样式名改为value值
selection.property(name,value)	name：属性名 value：属性值	value为空时，返回当前属性值 Value非空是，设置name属性改为value值
selection.text()		文本内容，不包含其他元素标签
selection.html()		包括元素内部标签

selection.append(name)	name：元素名	在选择集末尾添加元素
selection.insert(name，before)	name：元素名 before：选择器名称	在选择集指定元素前插入元素
selection.remove()		删除选择集选中元素

selection.filter(func)	func：函数	根据func函数条件获取选择集的子集
selection.each(func)	func：函数	在func函数里对选择集的各个元素进行处理
selection.call(func)	func：函数	将选择集自身传递给func函数
selection.sort(func)	func：函数	根据func函数规则来排序

attr() 不能应用到文本框，复选框等一部分组件中，需要用property来获取值和设置值

设置文本空的值 d3.select(“#email”).property(“value”,”1234@163.com“)

数据绑定

函数	参数	返回值
selection.datum(value)	value：数据值	选择集中每个元素都绑定相同的数据value
selection.data(values,key)	values：数组 key：键函数	选择集中每个元素都分别绑定数组values key非空时，以key定义规则绑定数据

update = selection.data(dataset)

函数	返回值
update.enter()	元素少于数据，需要让元素多“enter”几个，以此让所有数据都可以绑定到元素
update.exit()	元素多于数据，需要让元素多“exit”几个，因为没有多余的数据来让元素绑定

通用处理模板：

var dataset = [1, 2, 3];

var p = d3.select(“body”).selectAll(“p”);

var update = p.data(dataset):

var enter = update.enter();

var exit = update.exit();

update.text(function(d){ return d; });

enter.append(“p”)

.text( function(d) { return d; } );

数据处理

数组

dataset = [1, 2, 3, 4, 5, 6]

函数	返回值
dataset.sort( d3.ascending )	递增排序，直接修改数组
dataset.sort( d3.descending )	递减排序，直接修改数组
d3.shuffle( dataset )	随机排列，直接修改数组
d3.permute(dataset, indexs)	根据indexs来排序数组
d3.pairs( dataset )	返回 i 项和 i-1 项组成的对的数组
d3.range( start, stop, step )	等差数列
d3.merge( dataset1, dataset2 )	两个数组合并为一个
d3.zip( dataset1, dataset2, … )	多个数组构成二维数组( 矩阵 )
d3.transpose( matrix )	转置矩阵

映射

函数	返回值
d3.map( dataset ,key )	构造映射
d3.has(key)	key 非空，返回 true
map.get(key)	key 非空，返回 value
map.set(key, value)	设置 key 为 value
map.remove(key)	key 非空，删除后，返回 true
map.keys()	返回所有 key
map.values()	返回所有 value
map.entries()	返回所有 key，value
map.forEach(function(k,v){})	对映射中的每一项调用function函数
map.empty()	map非空，返回 true
map.size()	映射大小

统计

函数	返回值
d3.min( dataset, accessor )	最小值
d3.max( dataset, accessor )	最大值
d3.extent( dataset, accessor )	最小值和最大值
d3.sum( dataset, accessor )	总和
d3.mean( dataset, accessor )	平均值
d3.median( dataset, accessor )	数据集的中位数
d3.quantile( dataset, p)	p分之位数，p=0.25就是上四分位数
d3.variance( dataset, accessor )	方差
d3.deviation( dataset, accessor )	标准差