A DOM style is presentation information that controls an element’s visual characteristics, including color, size, borders, and opacity. Styles describe appearance, while attributes describe values such as classes, IDs, or SVG geometry, and properties describe current state. section 1.2.1
D3 sets or modifies styles with selection.style(property, value). The method writes inline styles directly onto selected elements, which is especially useful when data changes the presentation dynamically. section 2.6
Apply styles with these practical rules:
- Use an external CSS stylesheet when maintainability is the priority. section 2.6
- Use style() when presentation changes dynamically with data. section 2.6
- For SVG properties such as fill and stroke, choose attr() or style() consistently so shape-making and visual presentation remain easy to manage. section 2.6
const svg = d3.select(".responsive-svg-container")
.append("svg")
.attr("viewBox", "0 0 1200 1600")
.style("border", "1px solid black");
This example adds an SVG container and gives it a one-pixel black border with style(). Inspecting the DOM reveals the resulting inline style. section 2.6
