D3.js的基础部分之数组的处理 数组的排序和求值(v3版本)

操作数组   D3提供了将数组洗牌、合并等操作,使用起来是很方便的。   d3.shuffle(array,[,lo[,ji]]) :     //随机排列数组。 d3.merge(arrays) :         //合并两个数组。 d3.pairs(array) :             //返回邻接的数组对。 d3.range([start,]stop[,step]) :    //返回等差数列。 d3.permute(array,indexes) :     //根据指定的索引号数组返回排列后的数组。 d3.zip(arrays...) :           //用多个数组来制作数组的数组。 d3.transpose(matrix) :        //求转置矩阵。   "shuffle"有"洗牌的意思,将数组作为参数使用后,能将数组随机排列。举个例子 :
1 var numbers = [10,13,15,17,19,21];
2         d3.shuffle(numbers)
3         //打印一下新数组
4         console.log(numbers)    //重新随机排列的数组:[19, 17, 10, 15, 21, 13];

 d3.merge(arrays) :  合并两个数组:

1 d3.merge(arrays)    : //合并两个数组。将两个数组合并时使用
2         var numbers1 = [1,2];
3         var numbers2 = [3,4];
4         var numbers3 = d3.merge([numbers1,numbers2]);
5         //打印一下numbers3
6         console.log(numbers3)   //返回[1, 2, 3, 4]

 

   d3.pairs(array) : 返回邻接的数组对。 使用pairs()后,原数组不变。以第i项和第i-1项为对返回,举个例子 :
1 var colors = ["red","blue","yellow"];
2         //colors不变,结果保存在pairs中
3         var pairs = d3.pairs(colors);
4         // 打印一下parirs
5         console.log(pairs)  //返回["red", "blue"]  ["blue", "yellow"]   

 

  d3.range([start,]stop[,step]) : 返回等差数列。参数有三个 : start、stop、step。返回的等差数列为 :[start,start+step,start+2*step,......] 如果stop为正,则最后的值小于stop。如果stop为负,则最后的值大于stop。start和step如果省略,则默认值分别为0和1。举个例子 :
1 var a = d3.range(0,10,1)
2         var b = d3.range(2,10,1)
3         var c = d3.range(2,10,2)
4         //打印一下结果
5         console.log(a)  //返回的数据为[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
6         console.log(b)  //返回的数据为[2, 3, 4, 5, 6, 7, 8, 9]
7         console.log(c)  //返回的数据为[2, 4, 6, 8]

 

要注意 : 省略参数的使用方法,根据参数个数的不同,结果是不同的。range()在生成数组时经常使用。     d3.permute(array,indexes) : 根据指定的索引号数组返回排列后的数组。此函数可以用某个由索引号组成的数组,返回根据索引号排列后的新数组,原数组不变。举个例子 :  
1   var animals = ["cat","dog","bird"];
2         //根据[2,1,0]将数组animals重新排列,但是原数组animals不变,结果保存在返回值中
3         var newAnimals = d3.permute(animals,[2,1,0])
4         //打印一下新数组
5         console.log(newAnimals) //返回的新数组 ["bird", "dog", "cat"]
要注意:数组索引号是从0开始的,如果有超出范围的索引号,该位置会以undefined代替。       d3.zip(arrays...) : 用多个数组来制作数组的数组。参数是任意多个数组,输出是数组的数组。举个例子 :
1 var zip = d3.zip([1000, 1001, 1002],
2                         ["zhangsan", "lisi", "wangwu"],
3                         ["true", "false", "NaN"])
4         //打印一下结果
5         console.log(zip)    //结果为 : [
6                                 [1000, "zhangsan", "true"],
7                                 [1001, "lisi", "false"],
8                                 [1002, "wangwu", "NaN"]
9                             ]
可以看到,参数中每个数组的第i项变成了新数组的第i项。zip()可以被用来求向量的内积。再举个例子 :  
 1  var a = [10,20,5];
 2         var b = [-5,10,3];
 3         var ab = d3.sum(d3.zip(a,b),function(d){
 4             return d[0]*d[1]
 5         })
 6 
 7         console.log(ab) //返回的值为165
 8         //上面代码中,使用d3.zip(a,b)得到的结果为 
 9         console.log(d3.zip(a,b))    //[ [10, -5],[20, 10],[5, 3] ]
10         //然后,这个数组会被function(d)先处理,处理的结果为:[-50,200,15]
11         //最后再被d3.sum()求和,结果即向量a和b的内积。

 

  d3.transpose(matrix) : 求转置矩阵。 将矩阵的行换成相应的列,得到的矩阵即转置矩阵。举个例子:    
1 var a =[[1,2,3],[4,5,6]];
2         //转置后,原数组不变,结果保存在返回值中
3         var t = d3.transpose(a)
4         //输出结果
5         console.log(t)      //结果为 : [[1,4],[2,5],[3,6]]

 

                                     
上一篇:JavaScript(二十八)无缝滚动demo


下一篇:<知识整理>2019清北学堂提高储备D3