selection.select() selects first descendant matching selector
For each selected element, selection.select(selector) selects the first descendant element that matches the specified selector string. If no element matches, that position in the returned selection will be null. The selector can be a string or a function. Unlike selection.selectAll(), this method preserves the existing group structure and indexes, and propagates data (if any) to selected children. Caution: selection.select propagates the parent's data to the selected child.
selection.selectAll() selects all descendant elements matching selector
For each selected element, selection.selectAll(selector) selects the descendant elements that match the specified selector string. Elements in the returned selection are grouped by their corresponding parent node. If no element matches or the selector is null, the group will be empty. Selected elements do not inherit data from this selection; use selection.data() to propagate data to children. Unlike selection.select(), this method affects grouping by grouping each selected descendant by the parent element in the originating selection.
selection.filter() returns new selection with elements matching filter
selection.filter(filter) filters the selection, returning a new selection that contains only the elements for which the filter is true. The filter can be specified as a selector string or a function. If a function, it is evaluated for each selected element with parameters: current datum (d), current index (i), current group (nodes), and this as the current DOM element. The returned filtered selection preserves the parents but does not preserve indexes as some elements may be removed.
selection.selectChildren() selects all matching children
selection.selectChildren(selector) returns a new selection with the children of each element of the current selection matching the selector. If no selector is specified, selects all children. If selector is a string, selects the children that match (if any). If selector is a function, it is evaluated for each child node with parameters: child, child's index (i), and list of children (children), and selects all children for which the function returns truthy.
selection.selection() returns the selection
selection.selection() returns the selection itself for symmetry with transition.selection().
d3.matcher() returns function testing element selector match
d3.matcher(selector) returns a function which returns true if the element matches the specified selector. This method is used internally by selection.filter(). For example, selection.filter('div') is equivalent to selection.filter(d3.matcher('div')).
d3.selector() returns function selecting first descendant matching selector
d3.selector(selector) returns a function which returns the first descendant of an element that matches the specified selector. This method is used internally by selection.select(). For example, selection.select('div') is equivalent to selection.select(d3.selector('div')).
d3.selectorAll() returns function selecting all descendants matching selector
d3.selectorAll(selector) returns a function which returns all descendants of an element that match the specified selector. This method is used internally by selection.selectAll(). For example, selection.selectAll('div') is equivalent to selection.selectAll(d3.selectorAll('div')).
d3.window() returns owner window for node
d3.window(node) returns the owner window for the specified node. If node is a node, returns the owner document's default view; if node is a document, returns its default view; otherwise returns the node.
d3.style() returns style property value for node
d3.style(node, name) returns the value of the style property with the specified name for the specified node. If the node has an inline style with the specified name, its value is returned; otherwise, the computed property value is returned.
d3.select() selects first matching element
d3.select(selector) selects the first element that matches the specified selector string. If no elements match, returns an empty selection. If the selector is not a string, it selects the specified node instead. For example, d3.select('#chart') or d3.select(document.body).
Selection indentation convention: 4 spaces for same selection, 2 for new selection
By convention, selection methods that return the current selection (such as selection.attr) use four spaces of indent, while methods that return a new selection use only two. This helps reveal changes of context by making them stand out in the chain.
Selection method forms: select vs selectAll
Selection methods come in two forms: select selects only the first matching element, while selectAll selects all matching elements in document order. Top-level methods are d3.select() and d3.selectAll() which query the entire document; subselection methods are selection.select() and selection.selectAll() which restrict selection to descendants.
Selection selector types: string or function
Selectors in D3 selection methods can be specified as either a string (CSS selector) or a function. When a function is used, it is evaluated for each selected element, being passed the current datum (d), current index (i), and current group (nodes), with this as the current DOM element.
Example: selection chain with mixed indent levels
d3.select('body')
.append('svg')
.attr('width', 960)
.attr('height', 500)
.append('g')
.attr('transform', 'translate(20,20)')
.append('rect')
.attr('width', 920)
.attr('height', 460);
This example shows how append() returns a new selection (2-space indent) while attr() returns the current selection (4-space indent).
Example: extending selection prototype with custom method
d3.selection.prototype.checked = function(value) {
return arguments.length < 1
? this.property('checked')
: this.property('checked', !!value);
};
d3.selectAll('input[type=checkbox]').checked(true);
This example shows how to add a custom method to check all checkboxes in a selection.
Example: d3.select with node reference
d3.select(document.body).style('background', 'red');
This example shows using d3.select() with a node reference directly instead of a selector string.
Example: selection.selectAll with function returning array of siblings
const sibling = d3.selectAll('p').selectAll(function() {
return [
this.previousElementSibling,
this.nextElementSibling
];
});
This example shows using selection.selectAll() with a function that returns an array of both previous and next siblings.
Example: filtering selection by CSS pseudo-class
const even = d3.selectAll('tr').filter(':nth-child(even)');
This example shows filtering table rows to contain only even rows using a CSS pseudo-class selector.
Example: filtering selection with function
const even = d3.selectAll('tr').filter((d, i) => i & 1);
This example shows filtering a selection using a function that checks the index.
d3.selection() returns root element
d3.selection() selects the root element, document.documentElement. It can be used to test for selections using instanceof d3.selection, or to extend the selection prototype.
d3.select signature
d3.select(element) returns a D3 selection wrapping a DOM element. It supports .call(axisGenerator) to render axes and other operations like .attr().
Svelte LinePlot with d3-axis and d3-selection
Example Svelte component using D3 for axes. Use Svelte's bind:this directive to reference axis groups, then use reactive statements ($:) to call d3.select(ref).call(d3.axisBottom(x)) when scales change.
d3.create SVG signature
d3.create("svg") creates a new SVG element. It returns a D3 selection that supports .attr("width", value), .attr("height", value), .append("g"), and .node() to get the underlying DOM element.
React LinePlot with d3-axis and d3-selection
Example React component using D3 for axes. D3 modules that manipulate the DOM (d3-selection, d3-axis, d3-transition) compete with React's virtual DOM. Use a useRef hook to attach refs to axis group elements, then call d3.select(ref.current).call(d3.axisBottom(x)) inside a useEffect hook with appropriate dependencies.