数组的处理 之 集合(set)
集合(Set)是数学中常用的概念,表示具有某种特定性质的事物的总体。集合里的项叫做元素。集合的相关方法有:
 
d3.set([array])       
//使用数组来构建集合,如果数组里有重复的元素,则只添加其中一项。
 
set.has(value)       
//如果集合中有指定元素,则返回true,如果没有返回false。
 
set.add(value)      
//如果该集合中没有指定元素,则将其添加到集合中,并返回该元素,如果有,则不添加
 
set.remove(value)    
//如果该集合中有指定元素,则将其删除并返回true。否则返回false。
 
set.values()        
//以数组的形式返回该集合中所有的元素。
 
set.forEach(function)    
//对每一个元素都调用function函数,函数里传入一个参数,即该元素的值。
 
set.empty()          
//如果该集合为空,则返回true,否则返回false
 
set.size()             
//返回该集合的大小。
 
通过代码来实践一下上述函数的使用方法:
 //定义一个源数组
var dataList = ["tiger", "dragon", "snake", "horse", "sheep"];
//构建一个集合,将其保存在变量set中
var set = d3.set(dataList); console.log(set.has("tiger")) //返回值true
console.log(set.add("monkey")) //返回值monkey console.log(set.values()) //返回值["tiger", "dragon", "snake", "horse", "sheep", "monkey"] //集合中的每一个元素都将调用function函数
set.forEach(function(value){
console.log(value) //返回值分别打印出tiger、dragon、snake、horse、sheep、monkey
}) console.log(set.empty()) //返回值false
console.log(set.size()) //返回值6
有一点要注意,集合中不允许出现相同的元素,如果有相同的元素,则只会保留其中一项。这一点主要表现在构造集合和添加元素时:
 
 var dataList = ["tiger","tiger", "dragon", "snake", "horse", "sheep"];
var set = d3.set(dataList);
set.add("dragon"); console.log(set.values()) //返回值 ["tiger", "dragon", "snake", "horse", "sheep"]
 
由于数组dataList中的tiger元素有两个,因此结果只能保留一个,在使用add()添加元素时,dragon已经在集合中存在了,因此也没有添加。
 
 
 集合与映射相比,集合比较简单,没有键的概念。
 
 

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

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

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

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

    映射(Map)   映射(Map)是十分常见的一种数据结构,由一系列键(key)和值(value)组成的.每个key对应一个value,根据key可以获取和设定value,也可以根据key来查询val ...

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

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

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

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

  5. 【代码笔记】Java常识性基础补充(二)——数组、ArrayList集合、ASCII编码、 eclipse基础操作、eclipse调试、eclipse项目导入、eclipse快捷键

    1.0 如何定义数组以及访问数组中的元素,如下所示.ArrayDemo01.java public class ArrayDemo01 { public static void main(String ...

  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. ImsConference.java中会议成员更新处理详解

    public class ConferenceParticipant implements Parcelable { //自定义数据结构 private static final String ANO ...

  2. C++子类父类构造函数的关系

    在C++中子类继承和调用父类的构造函数方法 构造方法用来初始化类的对象,与父类的其它成员不同,它不能被子类继承(子类可以继承父类所有的成员变量和成员方法,但不继承父类的构造方法).因此,在创建子类对象 ...

  3. JUC源码分析-集合篇:并发类容器介绍

    JUC源码分析-集合篇:并发类容器介绍 同步类容器是 线程安全 的,如 Vector.HashTable 等容器的同步功能都是由 Collections.synchronizedMap 等工厂方法去创 ...

  4. 让微信小程序页面之间的通信不在变得困难

    一个开始 小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如... 场景还原 首先这是一个电商小程序. 有这样一个需求: 首页某个地方要展示购物车商品数量. 当我在其他页面加购了商品 ...

  5. 【转】谈一谈 Normalize.css

    原文链接: https://www.jianshu.com/p/9d7ff89757fd 笔记: 如何使用?

  6. 论文学习——《Good View Hunting: Learning Photo Composition from Dense View Pairs》

    论文链接:http://www.zijunwei.org/papers/cvpr18-photo-composition.pdf 代码及数据集链接:https://www3.cs.stonybrook ...

  7. socket 进程通讯理解

    [转]https://blog.csdn.net/andrewgithub/article/details/81613120 正如可以给fopen的传入不同参数值,以打开不同的文件.创建socket的 ...

  8. 笔记30 视图解析 ——TilesViewResolver

    Apache Tiles,定义适用于所有页面 的通用页面布局.Spring MVC以视图解析器的形式为Apache Tiles提 供了支持,这个视图解析器能够将逻辑视图名解析为Tile定义.  1.配 ...

  9. js单击时页面的弹出

    <!DOCTYPE html><html>      <head>         <script language="JavaScript&quo ...

  10. js排他功能示例

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...