开发手册 欢迎您!
软件开发者资料库

D3.js - Collections API

D3.js Collections API - 从简单和简单的步骤学习D3.js,从基本到高级概念,包括简介,安装,概念,选择,数据连接,SVG简介,SVG转换,转换,动画,绘图,图表,地理位置,数组,集合,选择,路径,尺度,轴,形状,颜色,过渡,拖动,缩放,请求,分隔符分隔值,计时器API,工作示例。

集合只是一个将多个元素组合成一个单元的对象.它也被称为容器.本章详细介绍了集合API.

配置API

您可以使用以下脚本配置API.

< script src ="https://d3js.org/d3-collection.v1.min.js"> < script> 

集合API方法

集合API包含对象,地图,集合和嵌套.以下是最常用的集合API方法.

  • Objects API

  • Maps API

  • 设置API

  • 嵌套API

让我们仔细阅读这些内容API详细信息.

对象API

对象API是重要的数据类型之一.它支持以下方法 :

  • d3.keys(对象) : 此方法包含对象属性键并返回属性名称的数组.

  • d3.values(object) : 此方法包含对象值并返回属性值数组.

  • d3.entries(object) : 此方法用于返回包含指定对象的键和值的数组.每个条目都是一个带有键和值的对象.

示例 : 让我们考虑以下代码.

 d3.entries({one:1})

此处,key为1,值为1.

示例 : 创建一个网页 objects.html 并添加以下更改.

                     

D3 collection API

         

现在,请求浏览器,您将看到以下回复.

Collections API

Maps API

地图包含基于键和值对的值。 每个键和值对称为条目。 地图仅包含唯一键。 根据密钥搜索,更新或删除元素非常有用。 让我们详细介绍各种Maps API方法。

  • d3.map([object[, key]]):此方法用于创建新地图。 Object用于复制所有可枚举属性。

  • map.has(key) : 此方法用于检查map是否具有指定键字符串的条目。

  • map.get(key) :此方法用于返回指定键字符串的值。

  • map.set(key, value) :此方法用于设置指定键字符串的值。 如果映射先前具有相同键字符串的条目,则旧条目将替换为新值。

  • map.remove(key) :它用于删除映射条目。 如果未指定密钥,则返回false。

  • map.clear() :从此地图中删除所有条目。

  • map.keys() :返回此映射中每个条目的字符串键数组。

  • map.values():返回此映射中每个条目的值数组。

  • map.entries():返回此映射中每个条目的键值对象数组。

  • (x) map.each(function): 此方法用于为地图中的每个条目调用指定的函数。

  • (xi) map.empty() :当且仅当此映射具有零条目时,返回true。

  • (xii) map.size() :返回此映射中的条目数。

Example:创建一个网页maps.html并添加以下更改。

                     

D3 collection API

         

现在,请求浏览器,我们将看到以下响应。

Map API

同样,您也可以执行其他操作。

Sets API

Set是一个不能包含重复元素的Collection。 它模拟了数学集抽象。 让我们详细介绍各种Sets API方法。

  • d3.set([array[, accessor]]) :此方法用于创建新集。 Array用于添加字符串值。 访问者是可选的。

  • set.has(value) :此方法用于检查集合是否具有指定值字符串的条目。

  • set.add(value) :它用于将指定的值字符串添加到集合中。

  • set.remove(value) :它用于删除包含指定值字符串的集合。

  • set.clear() :从此集中删除所有值。

  • set.values():此方法用于将值数组返回到集合。

  • set.empty():当且仅当此set具有零值时返回true。

  • set.size() :返回此集合中的值的数量。

Example :创建一个网页sets.html并添加以下更改。

                     

D3 collection API

         

现在,请求浏览器,我们将在屏幕上看到以下响应。

Sets API

同样,我们也可以执行其他操作。

Nests API

嵌套API包含数组中的元素,并以分层树结构执行。 让我们详细介绍各种Nests API方法。

  • d3.nest() :此方法用于创建新的嵌套。

  • nest.key(key) :此方法用于初始化新的键功能。 此函数用于调用输入数组中的每个元素并返回组中的元素。

  • nest.sortKeys(comparator):此方法用于对指定比较器中的键进行排序。 函数定义为d3.ascending或d3.descending。

  • nest.sortValues(comparator) :此方法用于对指定比较器中的值进行排序。 比较器函数对叶元素进行排序。

  • nest.map(array): 此方法用于应用指定的数组并返回嵌套的映射。 返回的映射中的每个条目对应于第一个键函数返回的不同键值。 输入值取决于已注册的键功能的数量。

  • nest.object(array) :此方法用于将嵌套操作符应用于指定的数组并返回嵌套对象。

  • nest.entries(array) :此方法用于将嵌套操作符应用于指定的数组并返回键值条目数组。

考虑一个简单的网页nest.html来执行上面讨论的嵌套方法。

Example:让我们考虑以下示例。

                     

D3 Nest API

         

现在,在浏览器中检查结果,我们将看到以下结果。

Array[3]0: Object1: Object2: Objectlength: 3__proto__: Array[0]Array[1]0: Objectlength: 1__proto__: Array[0]