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"有"洗牌的意思，将数组作为参数使用后，能将数组随机排列。举个例子 :

 var numbers = [10,13,15,17,19,21];
         d3.shuffle(numbers)
         //打印一下新数组
         console.log(numbers)    //重新随机排列的数组:[19, 17, 10, 15, 21, 13];

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

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

 

 d3.pairs(array) : 返回邻接的数组对。

使用pairs()后，原数组不变。以第i项和第i-1项为对返回，举个例子 :

 var colors = ["red","blue","yellow"];
         //colors不变，结果保存在pairs中
         var pairs = d3.pairs(colors);
         // 打印一下parirs
         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。举个例子 :

 var a = d3.range(0,10,1)
         var b = d3.range(2,10,1)
         var c = d3.range(2,10,2)
         //打印一下结果
         console.log(a)  //返回的数据为[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
         console.log(b)  //返回的数据为[2, 3, 4, 5, 6, 7, 8, 9]
         console.log(c)  //返回的数据为[2, 4, 6, 8]

要注意 : 省略参数的使用方法，根据参数个数的不同，结果是不同的。range()在生成数组时经常使用。

 

 

d3.permute(array,indexes) : 根据指定的索引号数组返回排列后的数组。此函数可以用某个由索引号组成的数组，返回根据索引号排列后的新数组，原数组不变。举个例子 :

 

   var animals = ["cat","dog","bird"];
         //根据[2,1,0]将数组animals重新排列，但是原数组animals不变，结果保存在返回值中
         var newAnimals = d3.permute(animals,[2,1,0])
         //打印一下新数组
         console.log(newAnimals) //返回的新数组 ["bird", "dog", "cat"]

要注意：数组索引号是从0开始的，如果有超出范围的索引号，该位置会以undefined代替。

 

 

 

d3.zip(arrays...) : 用多个数组来制作数组的数组。参数是任意多个数组，输出是数组的数组。举个例子 :

 var zip = d3.zip([1000, 1001, 1002],
                         ["zhangsan", "lisi", "wangwu"],
                         ["true", "false", "NaN"])
         //打印一下结果
         console.log(zip)    //结果为 : [
                                 [1000, "zhangsan", "true"],
                                 [1001, "lisi", "false"],
                                 [1002, "wangwu", "NaN"]
                             ]

可以看到，参数中每个数组的第i项变成了新数组的第i项。zip()可以被用来求向量的内积。再举个例子 :

  var a = [10,20,5];
         var b = [-5,10,3];
         var ab = d3.sum(d3.zip(a,b),function(d){
             return d[0]*d[1]
         })

         console.log(ab) //返回的值为165
         //上面代码中，使用d3.zip(a,b)得到的结果为
         console.log(d3.zip(a,b))    //[ [10, -5],[20, 10],[5, 3] ]
         //然后，这个数组会被function(d)先处理，处理的结果为:[-50,200,15]
         //最后再被d3.sum()求和，结果即向量a和b的内积。

d3.transpose(matrix) : 求转置矩阵。

将矩阵的行换成相应的列，得到的矩阵即转置矩阵。举个例子:

 

 var a =[[1,2,3],[4,5,6]];
         //转置后，原数组不变，结果保存在返回值中
         var t = d3.transpose(a)
         //输出结果
         console.log(t)      //结果为 : [[1,4],[2,5],[3,6]]