D3.js核心函数之数组

排序(Ordering)(这些数组的方法中,都会忽略无效的值,比如undefined,NaN)

d3.ascending(a,b),升序排序。如果a<b返回-1,a>b返回1,a=b返回0 

d3.descending(a,b),降序排序。如果a<b返回-1,a>b返回1,a=b返回0 

注:这两个比较函数都是自然排序(natural),可以与数组内置的sort方法一起使用,sort方法在没有指定比较函数的情况下,默认为字典排序(lexicographic,按照字母顺序排序)

var dataset = [33,12,92,28,6];
var asc = dataset.sort(d3.ascending); //6,12,28,33,92
var desc = dataset.sort(d3.descending); //92,33,28,12,6
var sort = dataset.sort(); // 12,28,33,6,92

d3.min(array[,accessor]),返回给定数组中自然排序最小的值。如果数组为空,则返回undefined。如果指定了accessor参数,相当于在计算最小值之前调用了array.map(accessor)方法。字符串元素的比较注重于字符的顺序,比如["20","3"]的最小值是"20",而[20,3]中最小的值是3

d3.max(array[,accessor]),返回给定数组中自然排序最大的值。其余的同d3.min()

d3.extent(array[,accessor]),返回给定数组自然排序的最小值和最大值,等同于同时调用d3.min和d3.max

d3.sum(array[,accessor]),返回给定数组的和。如果数组为空,返回0

d3.mean(array[,accessor]),返回给定数组的平均数,如果数组为空,返回undefined

d3.median(array[,accessor]),返回给定数组的中位数(如果为奇数,返回中间那个数,如果为偶数,返回中间两个数的平均数)

d3.quantile(numbers,p),返回给定数组的p分位,p的范围是0-1。比如中位数可以由p = 0.5计算,第一个四分位数是p = 0.25,第三个四分位数是p = 0.75。这个方法需要数组numbers包含数字且数字升序顺序排列,例如使用 d3.ascending排序。

d3.variance(array[,accessor]),返回给定数组的无偏总体方差。如果数组的长度小于2,返回undefined

d3.deviation(array[,accessor]),返回数组的标准差,即方差的平方根。如果数组的长度小于2,返回undefined

d3.bisectLeft(array,x[,lo[,hi]]),获取数组项的左侧位置。bisectLeft()所使用的数组必须经过递增排序。第二个参数用于指定某项的位置,如果此项在数组中存在,则返回此位置的左边。如果此项在数组中不存在,则返回第一个大于此项的值得左边。

//定义数组
    var numbers = [10,13,16,19,22,25]
    //获取16左边在数组中的位置
    var iLeft = d3.bisectLeft(numbers.sort(d3.ascending),16);
    console.log(iLeft) //2
    // 在iLeft位置处,删除0项,出入66
    numbers.splice(iLeft,0,66)
    //打印新数组
    console.log(numbers)  // [10, 13, 66, 16, 19, 22, 25]

/***************************************************************/

//定义数组
    var numbers = [10,13,16,19,22,25]
    //18在数组中不存在,返回介于16和19之间的位置
    var iLeft = d3.bisectLeft(numbers.sort(d3.ascending),18)
    console.log(iLeft) //返回值为3
    numbers.splice(iLeft,0,77);
    //打印新数组
    console.log(numbers) //输出[10, 13, 16, 77, 19, 22, 25]

d3.bisect(array,x[,lo[,hi]])d3.disectRight(array,x[,lo[,hi]]),都是获取数组项右侧的位置

d3.shuffle(array[,lo[,hi]]),随机排序

关联数组

d3.keys(object),返回一个包含指定对象属性名称的数组

d3.values(object),返回一个包含指定对象属性值的数组

d3.entries(object),返回一个包含对象中名称和值的数组

var data = {name:'zhangsan',age:23,sex:'男'}
var keys = d3.keys(data) // ["name", "age", "sex"] 
var values = d3.values(data) //["zhangsan", 23, "男"] 
var entries = d3.entries(data)
//(3) [{…}, {…}, {…}]
//0:{key: "name", value: "zhangsan"}
//1:{key: "age", value: 23}
//2:{key: "sex", value: "男"}
//length:3

映射(Maps)

d3.map([object][,key]),构建一个新的map,第一个参数是原数组,第二个参数用于指定映射的key

map.has(key),如果指定的key存在,则返回true,否则返回false

map.get(key),如果指定的key存在,则返回key对应的value值,否则返回undefined

map.set(key,value),对指定的key设置value,如果key存在,则会覆盖原来的value值,如果不存在,则会新增一个value

map.remove(key),如果指定的key存在,则删除盖key以及value值,并返回true,否则返回false

map.keys(),以数组的形式返回该map所有的key

map.values(),以数组的形式返回该map所有的value

map.entries(),以数组形式返回该map所有的key和value

map.forEach(function),分别对该map的每一项调用function函数,function函数传入两个参数key,value,分别代表每一项的key和value

map.empty(),如果该映射为空,返回true,否则返回false

map.size(),返回该映射的大小

var data = [{name:'zhangsan',age:23,sex:'男'},{name:'lisi',age:43,sex:'女'},{name:'wangwu',age:16,sex:'男'}]
/*var map = d3.map(data) 
c {_: {…}}
    _:
        0:{name: "zhangsan", age: 23, sex: "男"}
        1:{name: "lisi", age: 43, sex: "女"}
        2:{name: "wangwu", age: 16, sex: "男"}
    __proto__:Object  */
var map = d3.map(data,function(d){return d.name})
/*c {_: {…}}
    _:
        lisi:{name: "lisi", age: 43, sex: "女"}
        wangwu:{name: "wangwu", age: 16, sex: "男"}
        zhangsan:{name: "zhangsan", age: 23, sex: "男"}
    __proto__:Object*/
map.has("zhangsan") //true
map.get("lisi") //{name: "lisi", age: 43, sex: "女"}
map.set("wangwu",{age:55}) //{age:55}
map.remove("rose") //false
map.keys() //["zhangsan", "lisi", "wangwu"]
map.values()
/*c {_: {…}}
    _:
        0:{name: "zhangsan", age: 23, sex: "男"}
        1:{name: "lisi", age: 43, sex: "女"}
        2:{name: "wangwu", age: 16, sex: "男"}
    __proto__:Object  */
map.entries()
/*(3) [{…}, {…}, {…}]
0:{key: "zhangsan", value: {…}}
1:{key: "lisi", value: {…}}
2:{key: "wangwu", value: {…}}
length:3
__proto__:Array(0)*/
map.forEach(function(key,value){
    console.log(key,value)
/*zhangsan {name: "zhangsan", age: 23, sex: "男"}
lisi {name: "lisi", age: 43, sex: "女"}
wangwu {name: "wangwu", age: 16, sex: "男"}
*/
 })
map.empty() //false
map.size() //3

集合(Sets)

d3.set([array]) ,新建一个集合,如果指定了array,添加array的字符串值到返回集合中

set.has(value),如果集合中存在指定的value,返回true,否则返回false

set.add(value),添加指定参数value字符串到集合中

set.remove(value),如果集合中存在指定的value,删除该元素并返回true,否则返回false

set.values(),返回一个由集合中所有字符串类型的值组成的数组(可用于数组去重)

set.forEach(function),集合中的每一个元素都调用这个函数,传递元素的值作为参数

set.empty(),如果集合为空,返回true,否则返回false

set.size(),返回集合中值的个数

数组运算符(Array Operators)

d3.merge(arrays) ,合并指定参数arrays为一个数组,此方法和数组的内置方法concat类似

d3.merge([[1,4,[2]],[6,2]]) //[1,4,[2],6,2]

d3.range([start,]stop[,step]),生成一个包含算数级数(等差数列)的数组,start默认值为0,step默认值是1,结果不包含stop

var range = d3.range(1,10,3) //[1,4,7]
var range = d3.range(1,-9,-3) //[1, -2, -5, -8]

d3.permute(array,indexs),使用指定的indexs数组返回指定数组的转置

d3.permute(["a","b","c"],[1,2,0]) //["b","c","a"]
d3.permute(["a","b","c"],[1,2]) //["b","c"]
d3.permute(["a","b","c"],[1,2,0,4]) //["b","c","a",undefined]

d3.zip(arrays...),返回数组的数组,第i个数组包含来自每个arrays参数的第i个元素,返回的数组长度为arrays中最短数组的长度,如果arrays只包含一个数组,则返回的数组是包含一个元素的数组,没有任何参数时,返回的数组是空的

d3.zip([1,3],[6,22]) //[[1,6],[3,22]]
d3.zip([1,3],[6]) //[[1,6]]
d3.zip([1,3]) //[[1],[3]]

d3.transpose(matrix),等价于d3.zip.apply(null,matrix),矩阵转换

var a = [[1, 2,3 ] , [4, 5,6 ] ]
var t = d3.transpose(a);
console.log(t);// [[1,4],[2,5],[3,6]]

d3.pairs(array),返回指定数组中元素的每个相邻对

d3.pairs([1, 2, 3, 4]); // [[1, 2], [2, 3], [3, 4]]

嵌套(Nest)

 d3.nest(),表示一种嵌套结构,可以指定多个key访问器,这些访问器是一层一层嵌套的。将数组中的元素对象,按照key方法指定的属性,分组为层次结构。与SQL中的GROUP BY操作类似。嵌套后的叶节点都可以根据值进行排序,而非叶节点可以通过key进行排序

nest.key(function),注册一个函数,该函数将在输入数据的每个元素上调用,并且返回一个字符串标识以便归组重构。key方法就是个访问器,可以添加多个key方法,每次添加之后都将key方法追加到内部keys数组末尾,多个key就组成了一种嵌套结构

nest.sortKeys(comparator),为key方法指定排序规则,对属性值进行排序,如果没有指定排序规则则返回当前的排序规则,即数据的本身的顺序,默认为undefined

nest.sortValues(comparator),对嵌套结构values数组进行排序

nest.entries(array),为指定的数组应用嵌套操作,并以entries的形式返回

nest.map(array),为指定的数组应用嵌套操作,并以map的形式返回

nest.object(array),为指定的数组应用嵌套操作,并以object的形式返回

var dataset = [
	{"name":"jim","amount":34,"date":"11/12/2015"},
	{"name":"carl","amount":120.11,"date":"11/12/2015"},
	{"name":"jim","amount":45,"date":"12/01/2015"},
	{"name":"stacy","amount":12.00,"date":"01/04/2016"},
	{"name":"stacy","amount":34.10,"date":"01/04/2016"},
	{"name":"stacy","amount":44.80,"date":"01/05/2016"}
];
var nest = d3.nest()
.key(function(d){return d.name}) //将name设为key,进行分组
.sortKeys(d3.descending) //将key按照降序排列
.sortValues(function(a,b){return b.amount-a.amount}) //按照value值中的amount属性降序排列
.entries(dataset); //返回数组
console.log(nest)
/*
(3) [{…}, {…}, {…}]
0:key:"stacy"
values:Array(3)
0:{name: "stacy", amount: 44.8, date: "01/05/2016"}
1:{name: "stacy", amount: 34.1, date: "01/04/2016"}
2:{name: "stacy", amount: 12, date: "01/04/2016"}
length:3
__proto__:Array(0)
__proto__:Object
1:{key: "jim", values: Array(2)}
2:{key: "carl", values: Array(1)}
length:3
__proto__:Array(0)
*/

nest.rollup(),提供一个功能来获取每个组的values,并产生新的数值

var dataset = [
	{"name":"jim","amount":34,"date":"11/12/2015"},
	{"name":"carl","amount":120.11,"date":"11/12/2015"},
	{"name":"jim","amount":45,"date":"12/01/2015"},
	{"name":"stacy","amount":12.00,"date":"01/04/2016"},
	{"name":"stacy","amount":34.10,"date":"01/04/2016"},
	{"name":"stacy","amount":44.80,"date":"01/05/2016"}
];
//获取每个分组values的长度
var nest = d3.nest()
  .key(function(d) { return d.name; })
  .rollup(function(v) { return v.length; })
  .entries(dataset);
console.log(JSON.stringify(nest)); //[{"key":"jim","values":2},{"key":"carl","values":1},{"key":"stacy","values":3}]

//获取每个分组amount的平均值
var avgAmount = d3.nest()
  .key(function(d) { return d.name; })
  .rollup(function(v) { return d3.mean(v, function(d) { return d.amount; }); })
  .entries(dataset);
console.log(JSON.stringify(avgAmount));//[{"key":"jim","values":39.5},{"key":"carl","values":120.11},{"key":"stacy","values":30.3}]

//多种操作
var metrics = d3.nest()
  .key(function(d) { return d.name; })
  .rollup(function(v) { return {
    count: v.length,
    total: d3.sum(v, function(d) { return d.amount; }),
    avg: d3.mean(v, function(d) { return d.amount; })
  }; })
  .entries(dataset);
console.log(JSON.stringify(metrics));
//[{"key":"jim","values":{"count":2,"total":79,"avg":39.5}},
//{"key":"carl","values":{"count":1,"total":120.11,"avg":120.11}},
//{"key":"stacy","values":{"count":3,"total":90.9,"avg":30.3}}]

猜你喜欢

转载自blog.csdn.net/miao_yf/article/details/102551227