d3.js学习笔记-03
目录
d3.js学习笔记-031. 绑定数据1.1 datum()1.2 data()1.3 data()绑定数据的顺序
2 enter、exit和update2.1 enter：添加元素2.2 exit：删除元素2.3 统一处理的模板2.4 过滤器：selection.filter()2.5 选择集顺序：selection.sort()/d3.ascending2.6 each()2.7 call()
3 数组处理3.1 排序3.2 求值3.3 操作数组3.4 映射(一种数据结构)3.5 集合(set)3.6 嵌套结构(Nest)
References
1. 绑定数据
1.1 datum()
selection.datum([value])为选择集中的每一个元素都添加一个"__data__"属性，并且赋予相同的数据如果省略value，则返回属性的值
绑定/获取：
var p
=d3
.select("body" ) .selectAll("p");
p
.datum(7);
console.log(p
.datum());
使用：
替换文本
var p
=d3
.select ("body").selectAl1("p");
p
.datum("Thunder")
.text(funetion (d
,i
)
return d
+" "+i
;
};
传递绑定的数据给子元素
var p
=d3
.select ("body").selectAl1("p");
p
.datum("Thunder")
.append("span")
.text(funetion (d
,i
)
return " "+d
;
};
1.2 data()
selection.data(arr_values[, key])为选择集中的每一个元素分别绑定数组arr_values的每一项，key是一个键函数，用于指定绑定数组时对应的规则。
绑定数据：
var dataset
=[3，
6，
9];
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>
<script>
var dataset= [3，6，91];
var p = d3.select.( "body").selectAl1("p");
var update = p.data(dataset);
var enter = update.enter():
update.text(function (d){ return d;});
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");
var update = p.data(dataset;
var exit = update.exit();
update.text( function(d) return d;});
exit.remove ();
</script>
2.3 统一处理的模板
<script>
var update = p.data(dataset):
var enter -update.enter();
var exit-update.exit():
update.text(function(d)f return d;! );
enter.append("p")
.text(funetion (d) { return d; } );
exit.remove()
</script>
2.4 过滤器：selection.filter()
selection
.filter (function (d
,i
){
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)
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默认为1d3.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()
.key(function (d
) { return d
.year
;})
.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.
