d3.select() starts DOM manipulation by returning a D3 selection containing the first element that matches a CSS-style selector. The selection is ready for chained operations such as append(), attr(), and style(). section 2.3 section 2.7
Pass familiar CSS selector forms to identify one element:
- Use a tag name, such as d3.select("h1"). section 2.3
- Use a class or ID, such as d3.select(".intro") or d3.select("#viz-container"). section 2.3
- Combine selectors with CSS syntax, such as d3.select("#viz-container p"), or chain selections with .select("p"). section 2.3
- Remember that d3.select("circle") returns only the first matching circle; use d3.selectAll() when several elements are needed. section 2.3
d3.select("h1");
A minimal selection makes the API’s selector argument and single-element focus immediately visible. section 2.3
Add an SVG container
Select the existing .responsive-svg-container element and append an SVG element: d3.select(".responsive-svg-container").append("svg");. The browser may show no immediate change, but the SVG appears in the DOM and can then receive attributes or child shapes. section 2.4
Build a circle pack
Import select from d3-selection, select #circle-pack, append an SVG and group, then continue the chain with selectAll(), data(), and join("circle") to draw the chart’s circles. section 11.2.2
