Selection API in D3.js
A selection is the powerful DOM’s (Document Object Model) data-driven transformation. It can be applied to set Text Content or HTML, Properties, Styles, Attributes, etc. This D3.js’s chapter will help you to understand the selection API.
API Configuration
We can use the following script to configure the API.
Methods of Selection API
The essential methods of Selection API are listed below.
- d3.selection
- d3.selectAll(selector)
- d3.select(selector)
- selection.selectAll(selector)
- selection.merge(other)
- selection.filter(filter)
- d3.creator(name)
- d3.matcher(selector)
- selection.call(function[, arguments?])
- selection.each(function)
- d3.local()
- local.get(node)
- local.set(node,value)
- local.remove(node)
Let’s discuss the above methods in detail.
d3.selection
The selection API has a d3.selection method, which is applied to select the room components. It can also be applied to extend any selection d3js or to test the selections.
d3.selectAll(selector)
This selection API method can select every component that is the same as the specified string selector.
Syntax:
Let’s consider an example.
Example:
Output
d3.select(selector)
It defines the usage of the first component’s selection that is same as the specified string selector.
Syntax:
Let’s consider an example.
Example:
Output
selection.selectAll(selector)
It is another method of selection API which illustrates the usage of a component selection. It can choose the descendant components which is same as the specified string selector. Inside any returned selection, the components are collected together by the related parent node within the selection.
If there is no component (same as the described selector to the latest component), or the selectors are null, the collection over the latest index will be empty.
Syntax:
selection.merge(other)
It will return a unique selection merging along with the described other selection.
Syntax:
selection.filter(filter)
It is applied to selection filter, and will return a unique selection that includes only the components for which that specified filter gives the value true.
Syntax:
d3.creator(name)
It can be applied to assign a stated component name. It will give a function, which will make the provided name’s component, assuming that it is a parent component.
Syntax:
d3.matcher(selector)
This selection API method assigns a stated selector. It will give a function, which will return the true value.
selection.call(function[, arguments?])
It exactly invokes a specified function only once.
Syntax:
selection.each(function)
It invokes any specified function to all the selected components, in the sequence passed by a latest group (nodes), latest index (i), and latest datum (d) as a latest DOM component (node[I]).
It is described below:
d3.local()
It permits us to describe any local state, i.e., data independent.
Every local value can also be observed by DOM.
local.set(node,value)
It can set the local’s value over a specified node for the value.
local.remove(node)
The selection API has another important method, i.e., local.remove(node). It can remove the value of the local from a specified node. It will give the true value, when a node is represented. Otherwise, it will return the false value.