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)