Collection API in D3.js

A collection is something that can be defined as an object, which groups various elements into an individual unit. It is also known as the container. This division of D3 will help us to learn the collection API.

Configuring API

We can configure an API with the help of the script which is described as below:

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

Methods of Collection API

Collection API has nests, sets, maps, and objects. The following are four essential and widely used methods of Collection API.

Objects API
Sets API
Maps API
Nests API

Objects API

An object API in the collection API is an essential data type. It provides its support for a few important methods, which are listed below:

1. d3.keys(object): It has the property keys of the object, and it will return the property name’s array.

Consider the below example.

Example:

  <!DOCTYPE html>   <html>   <head>   <title>   Function d3.Keys()   </title>           <script src = “https://d3js.org/d3.v4.min.js”></script>   </head>       <body>   <script>           // Object initialization   var month = { “Jan”: 1, “Feb”: 2, “Mar”: 3, “Apr”: 4};                 // Calling the function d3.values()   A= d3.keys(month);    document.write(A);   </script>   </body>   </html>                   

Output:

Collection API in D3.js

2. d3.values(object): It has the values of the object and it will return the property name’s array.

Consider the below example.

Example:

  <!DOCTYPE html>   <html>   <head>   <title>   Function d3.values()   </title>           <script src = “https://d3js.org/d3.v4.min.js”></script>   </head>       <body>   <script>           // Object initialization   var month = { “Jan”: 1, “Feb”: 2, “Mar”: 3, “Apr”: 4};                 // Calling the function d3.values()   A= d3.values(month);              document.write(A);   </script>   </body>   </html>                   

Output:

Collection API in D3.js

3. d3.entries(object): It will return any array that has values and keys of a specified object. All the entries are the objects along with a value and key.

Consider the below example.

Example:

  <!DOCTYPE html>   <html>   <head>   <title>   Function d3.entries()   </title>           <script src = “https://d3js.org/d3.v4.min.js”></script>   </head>       <body>   <script>           // Object initialization   var month = { “Jan”: 1, “Feb”: 2, “Mar”: 3, “Apr”: 4};                 // Calling the function d3.values()   A= d3.entries(month);              document.write(A);   </script>   </body>   </html>                   

Output:

Collection API in D3.js

Sets API

The set is any group that can’t include the duplicate items. It designs a mathematical set abstraction.

Let’s discuss the various API methods of the set as follows:

d3.set([array[, accessor]]): It is applied to make any new set. An array is applied to include the string values, where accessors are optional.
set.has(value): It is applied to check that the set contains the entry for any specified string value.
set.add(value): It includes the described string value to a set.
set.remove(value): It can be applied to remove a set that may add any specified string value.
set.clear(value): It can clear every single value from any set.
set.values(value): This method can be applied if we want to get the array values to a set.
set.empty(value): It will return a true value when a set contains zero values only.
set.size(value): It will return the value’s numbers to a set.

Maps API

Following are the MAP APIs:

d3.map([object[, key]]): If we want to design any new map, we can use this method. Every enumerable property can be copied by using the object.
map.has(key): It is applied to ensure that the map contains an entry to any specified string key.
map.get(key): If we want to get the values to any specified string key, we can use this method.
map.set(key, value): It is applied to set any value to a specified string key. An old entry will be replaced by a new value if a previous map has entry to a similar string key.
map.remove(key): It can be applied to remove any map entry. It will return the value false if no key is specified.
Map.clear(): All the entries from a map can be removed using this method.
map.keys(): It will return the string’s array keys to all the entries inside a map.
map.values(): It will return the value’s array to all the entries inside a map.
map.entries(): It will return the key-value object’s array to all the entries inside a map.
map.each(function): If we want to call any specified function to all the entries inside a map, then we can use this method.
map.empty(): If a map contains zero entries, then it returns the value true.
map.size(): It will return the entry’s number inside a map.

Consider the below example.

Example:

  <!DOCTYPE html>   <html>   <head>   <title> Function d3.map.get() </title>   <script src=’https://d3js.org/d3.v4.min.js’></script>   </head>   <body>   <script>               // Map Creation  var map = d3.map({“Ram”: 5});             // Calling the map.get() function   A = map.get(“Ram”);             // We will get the “Ram” key’s value   document.write(A);   </script>   </body>   </html>  

Output:

Collection API in D3.js

Nests API

A few essential methods inside the nests API are as defined as follows:

d3.nest(): If we have to make any new nest, then we can use this method.
nest.key(key): Any new key function can be initialized by using this method.
nest.sortValues(comparator): It is applied to sort the values inside any specified comparator. The leaf elements can be sorted by the comparator function.
nest.map(array): It can be applied to use to return the nested map and specified array.
nest.object(array): It can be applied to return the nested object and use any nest operator for a specified array.
nest.entries(array): It will return key-values array entries and apply a nest operator for any specified array.

Next TopicGraphs in D3.js

animation in d3.js benefits of d3.js concepts of d3.js d3.js graphs d3.js installation features of d3.js what is d3.js

Collection API in D3.js

Collection API in D3.js

Configuring API

Methods of Collection API

Objects API

Sets API

Maps API

Nests API

Margin vs Padding

Dijkstra’s Algorithm

You may also like