D3.js核心函数之选择器

D3使用CSS3中的选择方式来选择元素，比如标签 ("div")、类(“.awesome”)、唯一标识符(“#foo”)、属性(“[color=red]”)、或者包含(“parent child”)等等，不再赘述，不熟悉的自己百度。

选择元素

d3.select(selector)，返回匹配的第一个元素，没有则返回空

d3.selectAll(selector)，返回所有匹配的元素数组，没有则返回空

内容

selection.attr(name[,value])，如果指定了value值，则为指定元素设置名为name值为value的属性，当value为常数时，则所有匹配元素都将设置相同的属性值，当value为函数时，则依次为元素设置值，该函数的参数是当前数据元素d和当前索引i，以及代表当前DOM元素的this上下文；如果没有指定value值，就会返回选中的第一个非空属性值。可以使用对象的方式同时设置多个属性，value值为null会清空内容。以下几种操作也类似。

selection.classed(name[,value])，设置或获取匹配元素的class属性

selection.style(name[,value[,priority]])，设置或获取匹配元素的style属性

selection.property(name[,value])，一些HTML元素具有特殊使用属性或者样式是不可寻址的，例如，表单文本（text）字段有一个value字符串属性，复选框（checkboxes）有一个checked布尔型属性。还有任何其他元素的可寻址字段（通用字段），例如className，可以使用这个property来设置或获取匹配元素的这些属性。

selection.text([value])，基于textContent属性，设置的文本内容将取代任何现有子元素

selection.html([value])，基于innerHTML属性，设置内部HTML内容将取代任何现有的子元素

selection.append(name)，在当前选择的每个元素内后面追加指定名称的新元素

selection.insert(name[,before])，在当前选择与指定before选择器匹配的每个元素之前插入具有指定name的新元素，如果没有指定before，则在当前选择的每个元素内后面追加指定名称的新元素

selection.remove()，删除从当前文档中选中的元素

selection.data([value[,key]])，将指定的一组数据与当前选择的元素相连，如果没有指定key函数，则value数据与匹配元素依次对应，数据被存储在属性__data__中。key函数用来决定数据和元素之间如何连接

selection.enter()，当前选择中存在但是当前DOM元素中还不存在的每个数据元素的占位符节点（数据多于元素）

<div class="box">
  <p>dog</p>
  <p id="cat">cat</p>
  <p>pig</p>
</div>

var p = d3.select(".box").selectAll("p");
var dataset = [3,6,9,12,15];
var update = p.data(dataset)
var enter = update.enter();
update.text(function(d,i){
	return "update:" + d + ",index:" + i;
});
var PEnter = enter.append("p")
PEnter.text(function(d,i){
	return "enter:" + d + ",index:" + i;
})
//页面显示
//update:3,index:0
//update:6,index:1
//update:9,index:2
//enter:12,index:3
//enter:15,index:4

selection.exit()，当前选择存在的DOM元素中没有新的数据元素（元素多于数据）

//代码承接上一个
var dataset = [3,6]
var update = p.data(dataset)
var exit = update.exit()
update.text(function(d,i){
	return "update:" + d + ",index:" + i
})
exit.text(function(d,i){
	return "exit"
})

//页面显示
//update:3,index:0
//update:6,index:1
//exit

selection.filter(selector)，过滤选择，返回一个新的选择只包含其指定的selector是true的元素

selection.datum([value])，获取或设置每个选定元素绑定的数据

<!DOCTYPE html>
<meta charset="utf-8">
<ul id="list">
  <li data-username="shawnbot">Shawn Allen</li>
  <li data-username="mbostock">Mike Bostock</li>
</ul>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
//通过dataset属性自定义数据
d3.selectAll("#list li")
    .datum(function() { return this.dataset; })
    .sort(function(a, b) { return d3.ascending(a.username, b.username); });
</script>

//页面显示
//Mike Bostock
//Shawn Allen

selection.sort([compaarator])，根据指定的comparator函数对当前选择的元素排序。（比较器函数默认为d3.ascending，通过传递两个数据元素a和b进行比较，并返回任一负的，正的，或零值。如果为负，则a应该在b之前；如果为正，则a应该为b后；否则a和b被认为是相等的顺序是任意的。）

selection.order()，将已排序的元素但已改变顺序的元素(如通过raise与lower方法)恢复为排序初始状态

.data与.datum的比较

<div class="box">
  <p>dog</p>
  <p id="cat">cat</p>
  <p>pig</p>
</div>

var dataset = ["so cute","cute","fat"]
// datum的使用
p.datum(dataset).text(function(d,i){
	return "第"+i+"个元素"+d;
});
//页面显示
//第0个元素so cute,cute,fat
//第1个元素so cute,cute,fat
//第2个元素so cute,cute,fat

//data的使用
p.data(dataset).text(function(d,i){
	return "第"+i+"个元素"+d;
});
//页面显示
//第0个元素so cute
//第1个元素cute
//第2个元素fat

动画和交互

selection.on(type[listener[,capture]])，为匹配的元素添加指定的事件，传递null给listener，可以删除监听器

d3.mouse(container)，获取相对于指定容器的x和y坐标

d3.touch(container[,touches],identifier)，获取相对于容器的单点触摸位置

d3.touches(container[,touches])，获取相对于容器的多点触摸位置

selection.transition()，在选中元素上开启过渡

selection.interrupt()，匹配元素上如果又过渡的话，立即中断

控制

selection.each(function)，为当前选中的每个元素调用指定的函数

selection.call(function[,arguments...])，调用指定的函数一次

selection.empty()，如果选择为空则返回true

selection.node()，返回选择中的第一个非空元素

selection.size()，返回选中的元素个数

d3.selection()，返回根的选择，相当于d3.select(document.documentElement)；通过selected instanceof d3.selection，返回true或者false，可以用来判断一个对象(selected)是不是一个选择

var value = [4,5,6];
var svg = d3.select(".box");

console.log(value instanceof d3.selection) //false
console.log(svg instanceof d3.selection) //true

D3.js核心函数之选择器

猜你喜欢