Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
d3-selection
Advanced tools
The d3-selection package is a part of the D3.js library, which is used for manipulating documents based on data. It provides powerful tools for selecting elements, binding data to them, and applying transformations to the document.
Selecting Elements
This feature allows you to select DOM elements and apply styles or other transformations to them. In this example, the background color of the body element is changed to light blue.
d3.select('body').style('background-color', 'lightblue');
Binding Data
This feature allows you to bind data to DOM elements and use that data to drive transformations. In this example, the font size of each paragraph element is set based on the bound data.
d3.selectAll('p').data([4, 8, 15, 16, 23, 42]).style('font-size', function(d) { return d + 'px'; });
Entering and Exiting Elements
This feature allows you to handle data-driven creation and removal of elements. In this example, new paragraph elements are created for each data point that does not already have a corresponding paragraph.
var p = d3.select('body').selectAll('p').data([4, 8, 15, 16, 23, 42]);
p.enter().append('p').text(function(d) { return 'New paragraph with data: ' + d; });
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. Compared to d3-selection, jQuery is more general-purpose and less focused on data-driven transformations.
React is a JavaScript library for building user interfaces. It allows developers to create large web applications that can update and render efficiently in response to data changes. While React is more focused on building reusable UI components, d3-selection is more specialized in data-driven document manipulation.
Vue.js is a progressive JavaScript framework used for building user interfaces. It is designed to be incrementally adoptable and focuses on the view layer. Vue provides reactive data binding and a component-based architecture, similar to React, but it is not as specialized in data-driven document manipulation as d3-selection.
This EXPERIMENTAL module implements the core concept of D3: manipulating the DOM by selecting elements and joining to data.
API changes from D3 3.x:
The implementation is now organized into ES6 modules, rather than the ad hoc SMASH bundling used previously. A UMD build is provided for your convenience using Esperanto, but you are free to define your own build process (e.g., Browserify or Webpack). See #2220.
The Selection class now extends Object, not Array, obviating the need for prototype injection (and direct property injection on runtimes that do not support __proto__
). See #2191.
Selections are now truly hierarchical! Rather than always being a nested array, selections have arbitrary depth. Accessor functions such as those accepted by selection.attr and selection.style can now refer to parent data (and indices) if desired.
The selection.data method, when called with arguments, now modifies the current selection to be the update selection, rather than returning a new selection. Likewise, the enter and exit selections are lazily constructed and modified in-place. The selection.enter and selection.exit methods now return empty selections if the selection has not yet been bound to data. (Previously, attempting to access these methods before binding to data would throw an error.) See #2402.
The selection.data method, when called without arguments, now returns an array of data for all elements in the selection, not just the first group.
Similarly, a new selection selection.nodes method returns an array of all elements in the selection (flattening the underlying hierarchy).
The selection.insert method has been renamed (and replaces) selection.append. Thus, the enter.append method now inserts elements in data order by default when joining by key! (This assumes that new data is in the same order as old data; if not, use selection.order after.)
The enter.append method now moves (rather than copies) elements to the update selection. (In practice, you are unlikely to notice the difference, as enter selections are typically discarded upon append. But this makes more sense now that enter selections are persistent.)
Enter selections no longer have a special subclass. Instead, enter nodes function as virtual placeholders, providing appendChild and insertBefore methods for use with selection.append.
The selection.classed method has been renamed selection.class. (Note: class
is a reserved word in ES6, but ES5 and later allow reserved words as identifier names.) The old name is deprecated but preserved for backwards-compatibility.
The selection.on method has been renamed selection.event. The old name is deprecated but preserved for backwards-compatibility.
A new selection.dispatch method dispatches a custom event of the specified type to all selected elements. It’s like trigger in jQuery.
Multi-value map variants of selection.attr, selection.style, selection.property, selection.class and selection.on are now implemented as distinct methods in the d3-selection-multi plugin, rather than overloading the arguments. See #2109.
The d3.ns.prefix namespace map has been renamed to d3.namespaces and is now a Map rather than an object. The d3.ns.qualify method has likewise been renamed to d3.namespace.
Removed support for Sizzle. It’s time.
FAQs
Data-driven DOM manipulation: select elements and join them to data.
The npm package d3-selection receives a total of 3,614,808 weekly downloads. As such, d3-selection popularity was classified as popular.
We found that d3-selection demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.