美文网首页d3(v5)
d3之操作数组 一 (统计,检索,变换)

d3之操作数组 一 (统计,检索,变换)

作者: 那头黑马 | 来源:发表于2019-09-27 09:22 被阅读0次

    d3之操作数组 二 (map与set)
    d3之操作数组 三(nest)

    1.统计学相关

    d3.min()最小值
    d3.max()最大值
    d3.extent()最小值最大值形成的区间
    d3.sum()求和
    d3.mean()算术平均值
    d3.median()中位数
    d3.quantile()计算已排序数字数组的分位数
    d3.variance()计算数组方差
    d3.deviation()计算数组的标准偏差

    var dataset=[50,undefined,20,30,NaN];
    console.log(d3.min(dataset));//20
    console.log(d3.max(dataset));//50
    console.log(d3.extent(dataset));//[20,50] 
    console.log( d3.sum(dataset,function(d){
            if(d<30){
                return d*1.15;
            }  else {
                return d*1.17;
            }
        }));//116.6
    console.log(d3.mean(dataset));//33.333333333333336  
    console.log(d3.median(dataset));//30
    let newDataset = dataset.sort(function(a,b){
            return a - b;
        });
        console.log('ssss',newDataset);//[20, 30, 50, NaN, undefined]
        console.log(d3.quantile(newDataset, 0.5));//NaN
        console.log(d3.variance(newDataset));//233.33333333333331
        console.log(d3.deviation(newDataset));//15.275252316519467
    

    ↗️可见数组中的undefined,NaN不影响对数组的处理,会自动忽略。

    2.检索类

    d3.ascending()升序
    d3.descending()降序

    var dataset=[50,100,20,30,60];  
    dataset.sort(d3.descending);
    console.log(dataset);//[100, 60, 50, 30, 20]
    dataset.sort(d3.ascending);
    console.log(dataset);//[20, 30, 50, 60, 100]
    

    d3.scan()对指定数组执行线性扫描,根据指定的比较器返回最小元素的索引。

    var dataobjnew=[
    {name:'商品1',value:50},
    {name:'商品2',value:20},
    {name:'商品3',value:30}
    ];
    console.log(d3.scan(dataobjnew,function(a,b){
            return a.value- b.value;
        }));//此为获取最小值的索引1
    console.log(d3.scan(dataobjnew,function(a,b){
            return b.value- a.value;
        }));//获取最大值的索引0  
    

    d3.bisect()同d3.bisectRight()
    d3.bisectRight()获取某个数在排好序的数组中的插入位置 (相等的值归入右边)
    d3.bisectLeft()获取某个数在排好序的数组中的插入位置 (相等的值归入左边)

    //以下为返回升序排列后50所在的位置(3)的右边的位置--4
    console.log(d3.bisectRight(dataset.sort(d3.asecending),50));//4
    //以下为返回升序排列后50所在的位置--3
    console.log(d3.bisectLeft(dataset.sort(d3.asecending),50));//3
    

    由上可见,d3.bisectRight()与d3.bisectLeft()是当往一个排好序的数组里插入给定的值时,应该在的位置。那这有什么用呢?请继续看

    var _index=d3.bisectRight(datasetnew.sort(d3.ascending),30);
    datasetnew.splice(_index,0,40);
    console.log(datasetnew);//[20, 30, 40, 50, 60, 100]
    

    d3.bisector()自定义比较器。注意必须是已排好序的数组哦~

    //先是升序排列
     dataobjnew.sort(function(a,b){
            return d3.ascending(a.value, b.value);
        });
    var _bisector=d3.bisector(function(d){return d.value;});//封装一个函数
    var _index2 = _bisector.right(dataobjnew,40);
    console.log(_index2);//打印索引2
    dataobjnew.splice(_index2,0,{name:'商品4',value:40});//插入
    console.log(dataobjnew);
    

    最后的结果如图:

    p1.png

    bisector.left()遇到相等的数值归入左侧,bisector.right()遇到相等的数值归入右侧。

    3.转换类

    以下面2个数组为例:

    var dataset=[50,100,20,30,60];
    var dataobj=[
    {name:'商品1',value:50},
    {name:'商品2',value:20},
    {name:'商品3',value:30}
    ];
    
    • d3.cross()计算两个数组的笛卡尔积。
    console.log(d3.cross(dataset,dataobj));//笛卡尔
    

    结果会生成3*5个length的数组:


    p1.png
    • d3.merge()将多个数组合并为一个数组。
    console.log(d3.merge(dataset,dataobj));//合并数组
    
    p2.png
    • d3.shuffle()随机改变顺序
    console.log(d3.shuffle(dataset));//随机改变顺序
    
    p3.png
    • d3.range()生成一个数值范围。
    console.log(d3.range(20));//生成20以内的整数不包括20
    
    p4.png
    console.log(d3.range(0,100,8));//生成10~100之间的整数,以8为步长
    
    p5.png
    • d3.zip()转置数组
    var dataset_name = ['name1','name2','name3','name4','name5','name6'];
    var dataset_value1 = [310,189,250,210,213,181];
    var dataset_value2 = [17400,13922,13753,18818,15873,17871];
    var dataset_zip = d3.zip(dataset_name,dataset_value1,dataset_value2);
    console.log(dataset_zip);
    
    p6.png
    • d3.transpose()转置数组
    var dataset_tranpose=d3.transpose(dataset_zip);
    console.log(dataset_tranpose);
    
    p6.png
    • d3.pairs()创建相邻元素对的数组。
    console.log(d3.pairs(dataset));
    
    p7.png
    • d3.permute()根据索引数组对元素数组重新排序。

    var object = {yield: 27, variety: "Manchuria", year: 1931, site: "University Farm"},
    fields = ["site", "variety", "yield"];
    d3.permute(object, fields); // returns ["University Farm", "Manchuria", 27]

    d3之操作数组 二 (map与set)
    d3之操作数组 三(nest)

    相关文章

      网友评论

        本文标题:d3之操作数组 一 (统计,检索,变换)

        本文链接:https://www.haomeiwen.com/subject/hcdiyctx.html