d3.js学习笔记-03
目录
1. 绑定数据
1.1 datum()
selection.datum([value])为选择集中的每一个元素都添加一个"__data__"属性,并且赋予相同的数据如果省略value,则返回属性的值
绑定/获取:
var p=d3.select("body" ) .selectAll("p");//选择body中所有的p元素,并将选择集结果给变量p
p.datum(7); // 绑定数值7到选择集上
console.log(p.datum());//在控制台输出7
使用:
- 替换文本
var p=d3.select ("body").selectAl1("p");
p.datum("Thunder") //绑定字符串Thunder到选择集上
.text(funetion (d,i)//替换文本,d:datum;i:index
return d +" "+i;
};
- 传递绑定的数据给子元素
var p=d3.select ("body").selectAl1("p");
p.datum("Thunder") //绑定字符串Thunder到选择集上
.append("span")// 每个元素后面加个span元素
.text(funetion (d,i)//设置文本,d:datum;i:index
return " "+d;
};
1.2 data()
selection.data(arr_values[, key])为选择集中的每一个元素分别绑定数组arr_values的每一项,key是一个键函数,用于指定绑定数组时对应的规则。
绑定数据:
//定义数组
var dataset=[3,6,9];
//选择body中的p元素
var p = d3.select("body").selectAl1("p");
//绑定数据到选择集,数组长度=元素数量
var update = p.data(dataset);
数组长度 VS 元素数量:
数组长度与元素数量有不相等的情况,如果数组长度为5,而元素数量为3,则多出两个数据没有绑定元素。如果数组长度为1,元素数量为3,则会有两个元素没有绑定数据:
- update: 数组长度=元素数量。
- enter: 数组长度>元素数量。
- exit: 数组长度<元素数量。
一般来说,在读入数据进行可视化的过程中,被读入的数据都要绑定到选择集的元素上,没有绑定数据的元素是没有用的。因此,这三个单词可以理解为:
- 如果数组长度大于元素数量,则部分还不存在的元素“即将进入可视化(enter)”。
- 如果数组长度小于元素数量,则多余的元素“即将退出可视化(exit)”。
- 如果数组长度等于元素数量,则绑定数据的元素“即将被更新(update)”。
1.3 data()绑定数据的顺序
- 默认情况下按照索引号(index)顺序绑定
- 使用键函数,设置绑定顺序;只在选择集绑定过数据的情况下有效
2 enter、exit和update
2.1 enter:添加元素
<body>
<p></p> <!--只有一个p元素 -->
<script>
var dataset= [3,6,91]; //绑定的数据
var p = d3.select.( "body").selectAl1("p"); //选择集
var update = p.data(dataset); // 绑定数据
var enter = update.enter(): // 获取enter部分
update.text(function (d){ return d;}); // 修改update部分
//enter部分的处理方法是添加元素后再修改内容
enter.append("p")
.text(function (dreturn d; });
</script>
/body>
结果
<p>3</p>
<p>6</p>
<p>9</P>
2.2 exit:删除元素
<script>
var dataset-[1o,20,30];
var p=d3.select(body").selectAl1("p");
//绑定数据之后,分别获取update部分和exit部分
var update = p.data(dataset;
var exit = update.exit();
//update部分的处理方法是修改内容
update.text( function(d) return d;});
exit.remove (); // 删除多余元素
</script>
2.3 统一处理的模板
<script>
// 绑定敷据后,分别返回update、enter.exit部分
var update = p.data(dataset):
var enter -update.enter();
var exit-update.exit():
// update的处理方法
update.text(function(d)f return d;! );
// enter部分的处理方法
enter.append("p")
.text(funetion (d) { return d; } );
// exit部分的处理方法
exit.remove()
</script>
2.4 过滤器:selection.filter()
// 函数返回所有绑定的数据大于20的元素
selection.filter (function (d,i){ // d:绑定的数据
if(d >20)
return true;
else
return false;
});
2.5 选择集顺序:selection.sort()/d3.ascending
selection.sort()只能对带有数据的元素进行排序, 根据被绑定的数据进行排序,参数为匿名函数(比较器)
2.6 each()
each()对选择集中的元素分别处理
p.data(persons)
.each(function (d,i){
d.age = 20;
})
2.7 call()
call()将选择集自身作为参数,传递给某一函数
d3.selectAll("div").call(function) // 将选择集作为参数传递给函数function使用
3 数组处理
3.1 排序
- d3.ascending(a, b):递增
- d3.descending(a, b):递减
var numbers = [54,23,77,11,34];
numbers.sort(d3.ascending); // 递增
numbers.sort(d3.descending); // 递减
3.2 求值
- d3.min(array[, accessor]):最小值
- d3.max(array[, accessor]):最大值
- d3.extend(array[, accessor]):返回数组,最小值和最大值
- d3.sum(array[, accessor]):求和(有效项)
- d3.mean(array[, accessor]):均值(有效项)
- d3.median(array[, accessor]):中间值(有效项)
- d3.quantile(numbers, p]):p分位点,[0,1]
- d3.variance(array[, accessor]):方差
- d3.deviation(array[, accessor]):标准差
- d3.bisectLeft():某数组项左边的位置
- d3.bisect()/d3.besectRight():某数组项右边的位置
accessor是一个函数,指定之后,数组的各个元素首先会调用accessor函数,处理数组的每一项,然后在求值。
3.3 操作数组
- d3.shuffle(array[, lo[, hi]]):随机排列数组
- d3.merger(arrays):合并两个数组
d3.merge([[1], [2]]);
- d3.pairs(array):返回邻接的数组对 [[第0项,第1项], [第1项, 第二项],…]
- d3.range([start,]stop[,step]]):返回等差数列,默认从0开始,step默认为1
- d3.permute(array, arr_indexes):根据指定的索引号返回重新排列后的数组
- d3.zip(arrays…):用多个数组产生数组的数组
- d3.transpose(matrix):求转置矩阵
3.4 映射(一种数据结构)
映射有一系列键key和值value组成,每个key对应一个value
- 构造映射
d3.map([object][, key]):构造映射,object:原数组;key:指定映射的key;
map.has(key):返回true/false
map.get(key):返回key对应的value或者undefined
map.set(key, value):设定指定key对应的value,不存在则添加
map.remove(key):删除此key和value并返回true/false
map.keys():以数组形式返回该map所有的key。
map.values():以数组形式返回该map所有的valuc。
map.entries():以数组形式返回该map 所有的key和value。
map.forEach(function):分别对该映射中的每一项调用function函数,function函数传入两个参数:key和value,代表每一项的key和value。
map.empty():如果该映射为空,返回true:否则,返回false.
map.size():返回该映射的大小。
3.5 集合(set)
集合中不存在重复的元素
- d3.set([array]):使用数组来构建集合,如果数组里有重复的元素,则只添加其中一项。
- set.has(value):如果集合中有指定元素,则返回true:如果没有,返回false.
- set.add(value):如果该集合中没有指定元素,则将其添加到集合中,并返回该元素;如果有,则不添加。
- set.remove(value):如果该集合中有指定元素,则将其删除并返回true:否则,返回false.
- set.values():以数组形式返回该集合中所有的元素。
- set.forEach(function):对每一个元素都调用function函数,函数里传入一个参数,即该元素的值。
- set.empty():如果该集合为空,则返回truc:否则,返回false.
- set.size():返回该集合的大小。
3.6 嵌套结构(Nest)
- d3.nest():构建一个新的嵌套结构,其他函数要与此函数一起使用
- nest.key(function):指定嵌套结构的键
- nest.entries(array):指定数组用于构建嵌套结构
var persons={
{id:100,name:"张某某",year:1989,hometown:"北京"},
{id:101,name:"李某某",year:1987,hometown:"北京"},
{id:102,name :"王某某",year:1988,hometown:"上海"},
{id:103,name:"赵某某",year:1987,hometown:"广州"},
{id:104,name:"孙某某".year:1989,hometown:"上海"}
];
var nest = d3.nest()
//将year作为第一个键
.key(function (d) { return d.year;})
//将hometown作为第二个锉
.key(functiontd(d){ return d.hometown;})
.entries(persons)
最终结果是数组,数组元素是类
- nest.sortValues(comparator):根据value对嵌套结构进行排序
var nest = d3.nest(
.key(function(d){ return d.sex; })
.sortValues(function(a,b){
return d3.ascending(a.age,b.age); // 根据年龄排序
})
.entries (persons) ;
- nest.rollup(function):对每一组叶子节点调用指定的函数function,函数参数values,是当前叶子节点的数组
var nest = d3.nest(
.key(function (id){return d.sex;})
.rollup ( function (values){ return values.length;})
.entries (persons):
- nest.map(arr[, mapType]):以映射结构输出数组(类似json文件格式)
var map = d3.nest() .key(function(d){ return d.sex;}) .map(persons,d3.map);
References
[1] 吕之华.精通D3.js:交互式数据可视化高级编程[M].北京:电子工业出版社,2015∶67-96.