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

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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,744评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,505评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,105评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,242评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,269评论 6 389
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,215评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,096评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,939评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,354评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,573评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,745评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,448评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,048评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,683评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,838评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,776评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,652评论 2 354

推荐阅读更多精彩内容

  • d3 (核心部分)选择集d3.select - 从当前文档中选择一系列元素。d3.selectAll - 从当前文...
    谢大见阅读 3,441评论 1 4
  • 一些概念 数据结构就是研究数据的逻辑结构和物理结构以及它们之间相互关系,并对这种结构定义相应的运算,而且确保经过这...
    Winterfell_Z阅读 5,786评论 0 13
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,233评论 0 4
  • 1. 找出数组中重复的数字 题目:在一个长度为n的数组里的所有数字都在0到n-1的范围内。数组中某些数字是重复的,...
    BookThief阅读 1,762评论 0 2
  • 1 初级排序算法 排序算法关注的主要是重新排列数组元素,其中每个元素都有一个主键。排序算法是将所有元素主键按某种方...
    深度沉迷学习阅读 1,404评论 0 1