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.
147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
