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 module implements the core concept of D3: manipulating the DOM by selecting elements and joining to data. This code is currently EXPERIMENTAL and represents the in-development D3 4.0 API. The 4.0 API is largely backwards-compatible, but differs from 3.x in several ways:
The implementation is now organized into ES6 modules, rather than the ad hoc concatentation used previously. A UMD build is provided using Esperanto, but feel free to roll your own.
The Selection class now extends Object, rather than Array. This obviates the need for prototype injection and direct property injection. Selections are now hierarchical, rather than having fixed two-level nesting. Accessor functions such as those accepted by selection.attr and selection.style can now refer to parent data and indexes 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. The enter and exit selections are now empty prior to a data-join, rather than non-existant. The selection.data method (when called without arguments) now returns an array of data for all selected elements, not just the first group.
Enter selections no longer have a special subclass, and thus support all selection methods.
A new selection.nodes method returns an array of all selected elements.
The selection.append method now takes an optional before selector and replaces selection.insert. The selection.insert method is now deprecated. The selection.append method now inserts entering 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.) The selection.append method now moves, rather than copies, entering elements to the update selection.
The selection.classed method has been renamed selection.class. 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. Think of it like jQuery’s trigger.
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 been renamed to d3.namespace.
Sizzle is no longer supported. It’s time.
FAQs
Data-driven DOM manipulation: select elements and join them to data.
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.