d3-selection
's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.Name | Version | Size | License | Type | Vulnerabilities |
---|
d3-selection is a JavaScript library that provides a flexible way of interacting with the Document Object Model (DOM). This library allows you to select elements and bind them to data, transforming the DOM based on the data and user interaction. Users can set attributes, styles, properties, HTML, or text content using this library, and join elements to data. It is particularly useful for data-driven transformations of the DOM.
To make use of d3-selection, start by installing it via npm using the command npm install d3-selection
. Once installed, you can import it into your JavaScript file via the import
statement. This library provides various methods for selecting, appending, and manipulating DOM elements. A typical usage pattern can be seen below:
import * as d3 from 'd3-selection';
// Select elements and apply transformations
d3.selectAll("p")
.attr("class", "graf")
.style("color", "red");
// This is equivalent to:
const p = d3.selectAll("p");
p.attr("class", "graf");
p.style("color", "red");
In the example above, all paragraph elements in the current document are selected and have the class "graf" and color "red" applied to them.
You might also use the .append method to append new elements:
import * as d3 from 'd3-selection';
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);
In this second example, an SVG element is appended to the body, and various transformations and additions are chained using method chaining.
You can find the d3-selection documentation on the d3-selection GitHub page. The page contains comprehensive information about every feature of the library, from installing, selecting elements, modifying elements, joining data, handling events, control flow, local variables, to namespaces. Each section contains examples showing how to use the particular feature. Browse through the different sections in the API Reference portion to fully understand how to use d3-selection.