D3.js的基础部分之数组的处理 映射(v3版本)

映射(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()                //返回该映射的大小。

接下来我们参照上图来构建一个映射,并分别调用上述函数。

 1 //用于构建映射的数组
 2         var dataList = [
 3             {id:1000,color:"red"},
 4             {id:1001,color:"green"},
 5             {id:1002,color:"blue"}
 6         ]
 7
 8         //以数组dataList构建映射,并以其中各项的id作为键
 9         var map = d3.map(dataList,function(d){return d.id})
10
11         //打印一下各方法的返回值
12         console.log(map.has(1001))      //返回true
13         console.log(map.has(1003))      //返回false
14
15         console.log(map.get(1001))      //返回{id: 1001, color: "green"}
16         console.log(map.get(1003))      //返回undefined
17
18         //将1001键的值设置为{id:1001,color:"yellow"}
19         map.set(1001,{id:1001,color:"yellow"})
20         console.log(map.get(1001))      //返回值{id: 1001, color: "yellow"}
21
22         // 将1003键的值设置为{id:1003,color:"white"}
23         map.set(1003,{id:1003,color:"white"})
24         console.log(map.get(1003))      //返回值{id: 1003, color: "white"}
25
26         map.remove(1001)
27         console.log(map.has(1001))      //返回值false
28
29         console.log(map.keys())         //返回值 ["1000", "1002", "1003"]
30         console.log(map.values())       //返回值[
31                                         //          {id:1000,color:"red"},
32                                         //          {id:1002,color:"blue"},
33                                         //          {id:1003,color:"white"}
34                                         //      ]
35
36         console.log(map.entries())      //返回值[
37                                         //         {key: "1000", value:{id: 1000, color: "red"}}
38                                         //         {key: "1002", value:{id: 1002, color: "blue"}}
39                                         //         {key: "1003", value:{id: 1003, color: "white"}}
40                                         //      ]
41
42         //该循环会进行三次,键一次为1000,1002,1003
43         map.forEach(function(key,value){
44             console.log(key)            //返回值依次为 1000、1002、1003
45             console.log(value)          //返回值依次为 {id: 1000, color: "red"}、{id: 1002, color: "blue"}、{id: 1003, color: "white"}
46         })
47
48         console.log(map.empty())        //返回值false
49         console.log(map.size())         //返回值3

映射还是很好理解的。唯一要注意的是,以上代码中,值(value)是包含键(key)的,即值是{id:1001,color:"yellow"}而不是{color:"yellow"}。使用set()设定的时候尤其要留意。键(key)是在构建映射时,由function(d){return d.id}指定的,当然也可以指定别的不相关的值,不一定要使用id。

原文地址:https://www.cnblogs.com/littleSpill/p/10796821.html

时间: 2024-10-03 22:51:01

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

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

数组的处理 : 数组时一种常用的数据结构,通常是由相同数据类型的项组成集合,拥有数组名,可以凭借数组名和下标来访问数组项.虽然JavaScript允许一个数组中存在不同的数据类型,但实际很少这样使用.需要被可视化的数据常以数组的形式存在,虽然JavaScript中提供了不少操作数组的方法,但JavaScript不是为了数据可视化而存在的.因此,D3数据可视化的需求封装了不少数组处理函数. 一 排序 : 排序的方法: d3.ascending(a,b); //递增函数.如果a小于b,则返回-1:如

d3.js学习3

Enter-update-exit模式 select.data(data),代表selection图形与data数据的交集->Update Mode select.data(data).enter(),代表data数据排除selection图形与data数据的交集->Enter Mode select.exit,移除所有数据,代表selection图形的部分->Exit Mode E-U-E即为d3.js的基础 数组数据绑定 var data=[10,15,24,46,13,6,96,1

js基础--javascript基础概念之数组(二)

js基础--javascript基础概念之数组 数组栈方法 数组可以像栈一样.栈是一种先进后出的数据结构,最先添加的数据最后一个出来.栈方法添加数据也称为 推入  移除数据称为 弹出. js为数值栈方法提供了 push()   和  pop() ;  两个方法. push() push() 方法接受参数就是你要添加进入到数组的值.push()  方法会将他们逐一添加到数组的末尾  数组的length属性会跟着更新数据. *push(多个数组元素值) 返回的修改后的数组长度 var array =

js基础--javascript基础概念之数组

js基础--javascript基础概念之数组 在ECMAScript 中 ,数组是很常用的数据类型,js中的数组和其他很多语言的数组有明显的区别.js的数组可以保持任何类型的数值,一个数组中可以保存着多个不同类型的数值.js数组大小(长度)是可以调整的.可以随着数据的添加自动增长数组长度. 创建数组: 一.数组字面量 数组字面量由一对包含数组项的方括号[]表示. var array = [ 'kin', 'cheong', 'change', 'hello', 'haha', 'hi' ];

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

买了本吕大师的d3可视化.最近来学习一下,做个笔记. 1.选择元素  select(第一元素) 和selectAll(全部的元素) 类似css的选择器.也可以是dom选中的. var impotant = document.getElementById("important"); d3.select(important); getElementById  使用select    getElementsByClassName  使用selectAll 2.选择集 d3.select  a

SVG基础图形和D3.js

使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circle cx="25" cy="25" r="25" fill="purple" /> </svg> D3.js来创建这些图形可以看做这一过程为两步: 创建SVG容器(SVG坐标空间) 画圆形 //创建一个SVG容

前端编程提高之旅(八)----D3.js数据可视化data join解析

   D3.js作为一门轻型的可视化类库,非常便于将数据与web界面元素绑定,实现可视化.乐帝d3.js入门是大体看了一遍<d3js数据可视化实战>这本书,D3操作非常类似于jquery的使用,具体体现在两点: 选择器模块都采用CSS3标准 方法可以链式调用    有了jquery使用基础,相信再加上以上书籍的例子,调试很容易上手使用D3.js,乐帝目前认为D3.js与jquery区别在于:D3.js独有的数据结构概念及对SVG操作方便的实现.而深入理解D3原理,以上皮毛的理解就不够用了.  

【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理,update .enter.exit 的原理和使用方法等,接下来一段时间里会有多篇此类文章. D3 最大的特色就是能够将数据绑定到DOM上.使用select或selectAll选择元素之后,被选择的元素上是没有数据的.数据绑定就是使被选择元素里包含有数据.与此相关的函数有两个: datum():将指

D3.js从入门到“放弃”指南

前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之后,觉得前面那chart类库局限的地方在于,基本不可定制:而D3呢,你说了算,你想画出什么样的图,你说了算,自由度很大,当时就有点膜拜和仰慕,小打小闹的玩了几下,没有沉下心来专心去玩,当时觉得真的很难.不理解,也看不进去. 后面因为接触了react.redux,接触了函数式编程.再回过头来从新捣鼓起