Rendering

In v4 a visualization compiles to a serializable scene graph that is painted by a pluggable backend. Two backends ship today: SVG (the default) and Canvas.

Choosing a backend

Set the backend with the renderer config key:

<BarChart config={{data, x: "x", y: "y", renderer: "canvas"}} />

new d3plus.BarChart().data(data).x("x").y("y").renderer("canvas").render();

Backend	Best for	Notes
"svg" (default)	Most charts; crisp, zoomable, inspectable output; the broadest feature coverage.	Each shape is a DOM node, so very dense charts (tens of thousands of shapes) can get heavy.
"canvas"	Dense, high-shape-count charts where paint performance matters.	Pointer hit-testing is supported via Path2D. Output is a raster.

Both backends consume the same scene graph and support the same configuration, tooltips, and pointer events — including texture/pattern and gradient fills, which the Canvas backend paints at parity with SVG — so you can switch between them without changing any other code.

Lifecycle and cleanup

A visualization observes its container for resizes and listens for pointer events. When you remove a chart, call destroy() to disconnect the ResizeObserver and remove its listeners:

const chart = new d3plus.BarChart().data(data).render();
// later, when tearing down:
chart.destroy();

In React this is automatic — the wrapper calls destroy() on unmount.

Responsiveness

A chart sizes itself to its container by default and re-renders on resize. Give the container an explicit width/height (or let it flow in your layout) and the visualization fills it:

<div style={{width: "100%", height: 400}}>
  <Treemap config={config} />
</div>

To pin a fixed size instead, set width and height in config.

Rendering without a browser

The scene graph can also be realized in Node — to an SVG string or a PNG image, with no browser — via the @d3plus/ssr package. See the Server-Side Rendering guide.