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

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

d3.map()

map其意为映射,es6里也有map方法,在不改变原数组的情况下可以根据需要return出来一个新的数组,d3.map也类似。d但有以下不同:

  • 键被强制为字符串。

  • map.each而不是map.forEach

  • map.remove而不是map.delete

  • map.entries 返回{key:value} 对象的数组

  • map.size是方法而不是属性,也有map.empty方法

  • 首先来看d3.map对普通的数组的映射改变。
    d3.map会自动给每个元素加上以索引为key的对象。

var dataset=[50,100,20,30,60];
var dataset_map = d3.map(dataset);
console.log(dataset_map);
//Map {$0: 50, $1: 100, $2: 20, $3: 30, $4: 60}

map.keys()获取所有的key

console.log(dataset_map.keys());
//["0", "1", "2", "3", "4"]

map.values()获取所有的值

console.log(dataset_map.values());
// [50, 100, 20, 30, 60]

map.entries()获取键值对数组

console.log(dataset_map.entries());
/*[
  {key: "0", value: 50},
  {key: "1", value: 100},
  {key: "2", value: 20},
  {key: "3", value: 30},
  {key: "4", value: 60}
  ]*/

map.get(key)用key获取值,key值无效或没有返回undefined

console.log(dataset_map.get("4"));
//60
console.log(dataset_map.get("6"));
//undefined
  • 对象数组的map方法不同于普通数组,需要指定一个key为首要索引
 var dataobj=[
                {name:'商品1',value:50},
                {name:'商品2',value:20},
                {name:'商品3',value:30}
          ];
var dataobj_map = d3.map(dataobj,function(d){
        return d.name;
    });

结果如图:

p1.png

同上map.keys()获取上次设置的首要的key值。

console.log(dataobj_map.keys());
//["商品1", "商品2", "商品3"]

map.values()获取原始数组

console.log(dataobj_map.values());
p2.png

map.entries()此时得到的是以商品的name为key值的所有数据对象的列表

console.log(dataobj_map.entries());

结果如下

[
  {key: "商品1", value: {name: "商品1", value: 50}},
  {key: "商品2", value: {name: "商品2", value: 20}},
  {key: "商品3", value: {name: "商品3", value: 30}}
]

那map.get(key)会得到相应的key对应的元素

 console.log(dataobj_map.get("商品1"));
//{name: "商品1", value: 50}
console.log(dataobj_map.get("商品1").value);
// 50

map.set()添加一条数据

dataobj_map.set("商品4",{name:'商品4',value:80});
console.log(dataobj_map);
p3.png

此时也可以与each方法连用添加一些属性,each方法会改变原数组

dataobj_map.each(function(d){
        if(d.value<30){
            d.rate=1.15;
        }else{
            d.rate=1.17;
        }
    });
    dataobj_map.each(function(d){
        if(d.value<30){
            d.num=115;
        }else{
            d.num=117;
        }
    });
console.log(dataobj_map);
p4.png

map.remove(key)删除某个元素

dataobj_map.remove("商品1");
console.log(dataobj_map);
p5.png

d3.set()

set类似于es6的set方法,但又有些不同:

  • values被强制转换为字符串。
  • set.each而不是set.forEach。
  • set.remove而不是set.delete。
  • set.size是方法,而不是属性,而且还有一个set.empty方法。
var dataset = d3.set([100,"商品1",{name:"商品1",value:100},true]);
console.log(dataset);
//{$100: "100", $商品1: "商品1", $[object Object]: "[object Object]", $true: "true"}

set.has(value) 当且仅当此集合具有指定值字符串的条目时,才返回true。
set.add(value)将指定的值字符串添加到此集中。
set.remove(value)如果集合包含指定的值字符串,则将其删除并返回true。否则,此方法不执行任何操作并返回false。
set.clear() 从该集合中删除所有值。
set.values()返回此集合中的字符串值的数组。
set.each(function)为该集合中的每个值调用指定的函数,将值作为前两个参数(与map.each对称)传递,然后传递集合本身。
set.empty()当且仅当此集合具有零值时,才返回true。
set.size()返回此集合中的值的数量。
d3之操作数组 一 (统计,检索,变换)
d3之操作数组 三(nest)

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

推荐阅读更多精彩内容