d3之操作數(shù)組 一 (統(tǒng)計(jì)，檢索，變換)
d3之操作數(shù)組 三(nest)
d3.map()
map其意為映射，es6里也有map方法伏穆，在不改變?cè)瓟?shù)組的情況下可以根據(jù)需要return出來一個(gè)新的數(shù)組，d3.map也類似纷纫。d但有以下不同：
鍵被強(qiáng)制為字符串枕扫。
map.each而不是map.forEach
map.remove而不是map.delete
map.entries 返回{key:value} 對(duì)象的數(shù)組
map.size是方法而不是屬性辱魁，也有map.empty方法
首先來看d3.map對(duì)普通的數(shù)組的映射改變。
d3.map會(huì)自動(dòng)給每個(gè)元素加上以索引為key的對(duì)象商叹。
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()獲取鍵值對(duì)數(shù)組
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值無(wú)效或沒有返回undefined
console.log(dataset_map.get("4"));
//60
console.log(dataset_map.get("6"));
//undefined
- 對(duì)象數(shù)組的map方法不同于普通數(shù)組，需要指定一個(gè)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;
});
結(jié)果如圖：
同上map.keys()獲取上次設(shè)置的首要的key值剖笙。
console.log(dataobj_map.keys());
//["商品1", "商品2", "商品3"]
map.values()獲取原始數(shù)組
console.log(dataobj_map.values());
map.entries()此時(shí)得到的是以商品的name為key值的所有數(shù)據(jù)對(duì)象的列表
console.log(dataobj_map.entries());
結(jié)果如下
[
{key: "商品1", value: {name: "商品1", value: 50}},
{key: "商品2", value: {name: "商品2", value: 20}},
{key: "商品3", value: {name: "商品3", value: 30}}
]
那map.get(key)會(huì)得到相應(yīng)的key對(duì)應(yīng)的元素
console.log(dataobj_map.get("商品1"));
//{name: "商品1", value: 50}
console.log(dataobj_map.get("商品1").value);
// 50
map.set()添加一條數(shù)據(jù)
dataobj_map.set("商品4",{name:'商品4',value:80});
console.log(dataobj_map);
此時(shí)也可以與each方法連用添加一些屬性,each方法會(huì)改變?cè)瓟?shù)組
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);
map.remove(key)刪除某個(gè)元素
dataobj_map.remove("商品1");
console.log(dataobj_map);
d3.set()
set類似于es6的set方法弥咪，但又有些不同：
- values被強(qiáng)制轉(zhuǎn)換為字符串。
- set.each而不是set.forEach聚至。
- set.remove而不是set.delete。
- set.size是方法扳躬，而不是屬性脆诉，而且還有一個(gè)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) 當(dāng)且僅當(dāng)此集合具有指定值字符串的條目時(shí)击胜，才返回true。
set.add(value)將指定的值字符串添加到此集中役纹。
set.remove(value)如果集合包含指定的值字符串首懈，則將其刪除并返回true涵妥。否則欠窒，此方法不執(zhí)行任何操作并返回false代芜。
set.clear() 從該集合中刪除所有值。
set.values()返回此集合中的字符串值的數(shù)組瘸味。
set.each(function)為該集合中的每個(gè)值調(diào)用指定的函數(shù)宫仗，將值作為前兩個(gè)參數(shù)（與map.each對(duì)稱）傳遞，然后傳遞集合本身硫戈。
set.empty()當(dāng)且僅當(dāng)此集合具有零值時(shí)锰什，才返回true。
set.size()返回此集合中的值的數(shù)量。
d3之操作數(shù)組 一 (統(tǒng)計(jì)汁胆，檢索梭姓，變換)
d3之操作數(shù)組 三(nest)
