D3.js Patterns

Quick Guide: D3 v7 is pure ES modules, so import from the individual packages (d3-selection, d3-scale, d3-shape) rather than the d3 bundle. selection.join() replaces manual enter/update/exit chains. Scales map a data domain to a visual range, axes render tick marks from a scale, and shape generators turn data arrays into SVG path strings. d3-transition extends the selection prototype by side effect, so .transition() does not exist until it is imported. The largest decision is who owns the DOM — D3, or the component framework around it.

Detailed Resources:

• examples/core.md — selections, data joins, scales, axes, shape generators, responsive SVG, the margin convention
• examples/interaction.md — transitions, zoom, brush, drag, tooltips
• examples/advanced.md — force layouts, geo projections, framework integration, TypeScript typing
• reference.md — module table, scale selection guide, shape generator signatures

Which path applies

• D3 owns the DOM. Needed for zoom, brush, drag and force tick, which all attach listeners and write attributes on their own schedule. Hand D3 a ref to one SVG element, call it from a mount hook, and return a cleanup that stops simulations and behaviours. Follow examples/core.md and examples/interaction.md.
• D3 computes, the framework renders. For static charts, D3 supplies scales, layouts and path strings while the framework emits the SVG declaratively. Cleaner, and nothing has to be cleaned up. Follow examples/advanced.md Pattern 3.

Two systems writing the same elements is the failure both branches avoid — pick one owner per SVG subtree.