@d3plus/svelte
A Svelte action for rendering d3plus visualizations.
Installing
npm install @d3plus/svelte. Requires svelte (4 or 5) as a peer dependency, and @d3plus/core for the visualization classes.
Usage
Apply the d3plus action to a container element with use:d3plus, passing the visualization class and its config:
<script>
import {d3plus} from "@d3plus/svelte";
import {Treemap} from "@d3plus/core";
let config = $state({
data: [
{parent: "Group 1", id: "alpha", value: 29},
{parent: "Group 2", id: "beta", value: 10},
],
groupBy: ["parent", "id"],
sum: "value",
});
</script>
<div use:d3plus={{constructor: Treemap, config}} style="height: 400px"></div>The action creates an <svg> inside the host element, instantiates the visualization, and re-renders whenever the parameters change. A single instance is reused across updates so the chart tweens between states rather than restarting; it is destroyed when the element unmounts. Swapping constructor rebuilds from scratch.
Because config is reactive, reassigning it (or mutating $state) drives updates automatically. Assigning a structurally-identical config is a no-op — set forceUpdate: true to render on every update.
Parameters
The action takes a single object parameter:
| Property | Description |
|---|---|
constructor |
Required. The d3plus visualization class to instantiate (e.g. Treemap). |
config |
Config object forwarded to the instance's .config() method. |
globalConfig |
Config merged ahead of config — a shared baseline across charts. |
callback |
A function invoked at the end of each render cycle. |
forceUpdate |
When true, re-renders on every update even if the config is unchanged. |