d3的常用方法和数据类型
1. 选择集自身属性
1. selection.empty() 选择集是否为空,为空返回true,否则返回false
2. selection.node() 返回第一个非空元素,无则返回null
3. selection.size() 返回选择集中的元素个数
2. 选择集元素属性
1. attr 设置属性
2. classed 设置class
3. style 设置行内样式
4. property 设置属性,区别于attr,部分属性不能用attr,例如 input的value,复选框的checked等,不会显示在标签上的属性
5. text 设置或获取元素内部的内容,不包括标签,效果同innerText
6. html 设置或获取元素颞部的html,效果同innerHTML
3. 选择集的增删
1. append(name) 追加元素,name为元素名
2. insert(name,[before]) 插入,name为元素名称,before为css选择器
3. remove() 删除元素
选择集遍历、排序、过滤
1. each((d,i) => {}) 遍历
2. filter((d,i) => {}) 过滤
3. sort((a,b) => {}) 排序,同js的array的sort
4. call(func) 对选择集的每一个元素调用func函数
4. d3数组常用操作
1. d3.ascending 升序函数 var nums = [1,5,2]; nums.sort(d3.ascending);
2. d3.descending 降序函数 var nums = [1,2,5]; nums.sort(d3.descending);
3. d3.min 最小值
4. d3.max 最大值
5. d3.extend 最小和最大值
6. d3.sum 求和
7. d3.mean 求平均值
8. d3.range([start,]stop[,step]) 返回范围,等差数列
9. d3.shuffle 洗牌数组
10. d3.merge 合并数组
5. d3的映射
d3的映射,map,就是key-value键值对,形式上与js的map有些区别。
d3.map([object][,key]) 会产生一个映射,其value,就是object的每个项,key是后面指定的key
例如:
var dataset = [ {id: 1000, color: "red"}, {id: 1001, color: "green"}, {id: 1002, color: "blue"} ] var map = d3.map(dataset, function(d){return d.id});
得到的映射是 key为 id,value为数组的一项,例如 {id: 1000, color: "red"}
映射有一些常用方法
map.has(key) map.get(key) map.set(key,value) map.remove(key) map.keys() map.values() map.entries() map.each() map.empty() //是否为空 map.size() //映射大小