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;
});
结果如图:
同上map.keys()获取上次设置的首要的key值。
console.log(dataobj_map.keys());
//["商品1", "商品2", "商品3"]
map.values()获取原始数组
console.log(dataobj_map.values());
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);
此时也可以与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);
map.remove(key)删除某个元素
dataobj_map.remove("商品1");
console.log(dataobj_map);
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)