选择
1.1 select
选择匹配的第一个元素
1.2 selectAll
选择匹配的第一个元素(数组)
1.3 selection 选择集
就是使用select或者selectAll选择返回的结果
dispatch (type, params) 派发事件,具体参考事件
each (callback)
对于分组后的数据遍历
exit()
filter (match)
var even = d3.selectAll("tr").filter(":nth-child(even)");
等价于:
var even = d3.selectAll("tr:nth-child(even)");
interrupt (name)
lower ()
重新将元素插入到对应父元素,作为父元素的第一个子元素,相当于:
selection.each(function() {
this.parentNode.insertBefore(this, this.parentNode.firstChild);
});
merge (selection$$1)
circle.enter().append("circle") // ENTER
.style("fill", "green")
.merge(circle) // ENTER + UPDATE
.style("stroke", "black");
order()
raise ()
重新将元素插入到对应父元素,作为父元素的最后一个子元素。相等于:
selection.each(function() {
this.parentNode.appendChild(this);
});
sort (compare)
transition(name)
1.3.1 查看状态
empty() 是否为空
node () 当前html内容,例如:<div id='root'></div> 只返回第一个
size () 选择的数量
nodes()当前dom对象
1.3.2 设定和获取属性
attr() 设置(获取)节点属性
classed() 设置或查看是否有该类
style() 设置(获取)节点样式
property() 用于处理HTML元素具有特殊的属性使用标准的属性或样式是不可寻址的
text() 设置获取选择集文本
html() 设置或获取内部html内容
1.3.3 添加、插入和删除
append(name)
insert (name, before)
remove()
1.3.4 数据绑定
datum (value)
将选择集中的每一个元素绑定相同的数据value
data (value, key)
将选择集中的每一个元素分别绑定数组中的每一项,key指定绑定规则,默认是:1-1,2-2...
1.3.5 数据与元素数量不一致
enter() 当数据>元素 部分
exit() 当数据<元素 部分
var update = d3.selectAll("p").data(dataSet)
var enter = update.enter()
var exit = update.exit()
//update 只更新内容
update.text(function(d){return d;})
//enter 添加元素后加入内容
update.append('p').text(function(d){return d;})
//exit 删除元素
update.remove()
1.3.6 其余
filter() 过滤器
sort() 排序
order() 重新插入数据后再排序,相当于重新调用sort(),但性能更好
each() 各元素单独处理
call() 将选择集自身做参数,传给函数
网友评论