映射(Map)
 
映射(Map)是十分常见的一种数据结构,由一系列键(key)和值(value)组成的。每个key对应一个value,根据key可以获取和设定value,也可以根据key来查询value。
 
上面那个图展示了一个映射,该映射以每个值得id作为键,每个键对应一个值。
 
 
d3.map()能构建映射,包括以下方法:
d3.map([object][,key])         
//构造映射。第一个参数是源数组,第二个参数用于指定映射的key。
 
map.has(key)           
//如果指定的key存在,则返回true。反之,返回false。
 
map.get(key)            
//如果指定的key存在,则返回该key的value。否则返回undefined。
 
map.set(key.value)           
//对指定的key设定value,如果该key已经存在,则新value会覆盖旧value。如果该key不存在,则会添加一个新的value。
 
map.remove(key)          
//如果指定的key存在,则将此key和value删除,并返回true。如果不存在,则返回false。
 
map.keys()              
 //以数组的形式返回该map所有的key。
 
map.values()            
//以数组的形式返回该map所有的value。
 
map.entries()            
//以数组形式返回该map所有的key和value。
 
map.forEach(function)        
//分别对该映射中的每一项调用function函数,function函数传入两个参数:key和value。分别代表每一项的key和vallue。
 
map.empty()            
//如果该映射为空,返回true。否则返回false。
 
map.size()                
//返回该映射的大小。
 
接下来我们参照上图来构建一个映射,并分别调用上述函数。
 
 //用于构建映射的数组
var dataList = [
{id:1000,color:"red"},
{id:1001,color:"green"},
{id:1002,color:"blue"}
] //以数组dataList构建映射,并以其中各项的id作为键
var map = d3.map(dataList,function(d){return d.id}) //打印一下各方法的返回值
console.log(map.has(1001)) //返回true
console.log(map.has(1003)) //返回false console.log(map.get(1001)) //返回{id: 1001, color: "green"}
console.log(map.get(1003)) //返回undefined //将1001键的值设置为{id:1001,color:"yellow"}
map.set(1001,{id:1001,color:"yellow"})
console.log(map.get(1001)) //返回值{id: 1001, color: "yellow"} // 将1003键的值设置为{id:1003,color:"white"}
map.set(1003,{id:1003,color:"white"})
console.log(map.get(1003)) //返回值{id: 1003, color: "white"} map.remove(1001)
console.log(map.has(1001)) //返回值false console.log(map.keys()) //返回值 ["1000", "1002", "1003"]
console.log(map.values()) //返回值[
// {id:1000,color:"red"},
// {id:1002,color:"blue"},
// {id:1003,color:"white"}
// ] console.log(map.entries()) //返回值[
// {key: "1000", value:{id: 1000, color: "red"}}
// {key: "1002", value:{id: 1002, color: "blue"}}
// {key: "1003", value:{id: 1003, color: "white"}}
// ] //该循环会进行三次,键一次为1000,1002,1003
map.forEach(function(key,value){
console.log(key) //返回值依次为 1000、1002、1003
console.log(value) //返回值依次为 {id: 1000, color: "red"}、{id: 1002, color: "blue"}、{id: 1003, color: "white"}
}) console.log(map.empty()) //返回值false
console.log(map.size()) //返回值3
映射还是很好理解的。唯一要注意的是,以上代码中,值(value)是包含键(key)的,即值是{id:1001,color:"yellow"}而不是{color:"yellow"}。使用set()设定的时候尤其要留意。键(key)是在构建映射时,由function(d){return d.id}指定的,当然也可以指定别的不相关的值,不一定要使用id。
 
 

D3.js的基础部分之数组的处理 映射(v3版本)的更多相关文章

  1. D3.js的基础部分之数组的处理 数组的排序和求值(v3版本)

    操作数组   D3提供了将数组洗牌.合并等操作,使用起来是很方便的.   d3.shuffle(array,[,lo[,ji]]) : //随机排列数组. d3.merge(arrays) :   / ...

  2. D3.js的基础部分之数组的处理 集合(Set)(v3版本)

    数组的处理 之 集合(set) 集合(Set)是数学中常用的概念,表示具有某种特定性质的事物的总体.集合里的项叫做元素.集合的相关方法有:   d3.set([array]) //使用数组来构建集合, ...

  3. Vue和d3.js(v4)力导向图force结合使用,v3版本升级v4【一】

    前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...

  4. D3.js的基础部分之选择集的处理 过滤器、选择集的顺序、each()和call()的应用(v3版本)

    选择集的处理 : 过滤器 有时候需要根据绑定数据对某选择集的元素进行过滤,例如某公司,只对id大于100的员工进行奖励.某学校只选拔身高超过170cm的学生等.类似这样的问题,需要根据条件获取选择集的 ...

  5. D3.js的基础部分之选择集的处理 enter和exit的处理方法 (v3版本)

    上一节给大家讲述额绑定数据的原理.当数组的长度与元素的数量不一致时,有enter部分和exit部分,前者表示存在多余的数据,后者表示存在多余的元素.本节将给大家介绍如何处理这些多余的东西,最后会给大家 ...

  6. D3.js(v3)+react框架 基础部分之数据绑定及其工作过程与绑定顺序

    数据绑定: 将数据绑定到Dom上,是D3最大的特色.d3.select和d3.selectAll返回的元素的选择集.选择集上是没有数据的. 数据绑定就是使被选择元素里“含有”数据. 相关函数有两个: ...

  7. D3.js学习笔记(六)——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  8. 精通D3.js学习笔记(1)基础的函数

    买了本吕大师的d3可视化.最近来学习一下,做个笔记.   1.选择元素  select(第一元素) 和selectAll(全部的元素)      类似css的选择器.也可以是dom选中的. var i ...

  9. D3.js (v3)+react框架 基础部分之认识选择集和如何绘制一个矢量图

    首先需要下载安装d3.js  :  yarn add d3 然后在组建中引入 :  import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子 ...

随机推荐

  1. ThinkJava-压缩

    尽管存在许多种压缩算恙,但是Zip和GZIP可能是最常用的.因此我们可以很容易地使用多 种可读写这些格式的工具来操纵我们的压缩数据.   1 用GZIP进行简单压缩 GZIP接口非常简单, 因此如果我 ...

  2. 生成Excel

    生成Excel 需要引用MyXls.SL2.dll的类库: 下载地址:http://sourceforge.net/projects/myxls/ 命名空间using org.in2bits.MyXl ...

  3. Xshell连接虚拟机突然被拒,提示再次输入密码。。。

    sudo vim /etc/ssh/sshd_config 将 # Authentication: LoginGraceTime 120 PermitRootLogin prohibit-passwo ...

  4. InnoDB: The log sequence number in ibdata files does not match

    InnoDB: The log sequence number in ibdata files does not matchInnoDB的:在ibdata文件的日志序列号不匹配 可能ibdata文件损 ...

  5. CentOS 多版本python安装pip

    首先配置环境 安装 zlib,zlib-devel,openssl,openssl-devel yum install zlib yum install zlib-devel yum install ...

  6. 【Arduino】、Arduino+ESP8266上传至oneNet云

    一.硬件简介 1. Arudino 是一种开源的电子平台,该平台最初主要基于AVR单片机的微控制器和相应的开发软件,包含硬件(各种型号的Arduino板)和软件(Arduino IDE). 2. ES ...

  7. 使用Git将码云上的代码Clone至本地

    1. 安装Git https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%AE%89%E8%A3%85-Git Git的网站上有详细的分各种系统的安 ...

  8. 删除链表中的元素 · Remove Linked List Elements

    [抄题]: Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> ...

  9. 第六章 Windows应用程序对键盘与鼠标的响应

  10. <<高级计算机网络>>(Advaned Computer Networks) 徐恪 徐明伟 陈文龙 马东超

    目录 第1章 计算机网络与Internet1 1.1 引言1 1.2 Internet发展历史2 1.2.1 互联网发展的主要阶段4 1.2.2 互联网在中国的发展5 1.2.3 互联网主要创新5 1 ...