Svelte is a lightweight compiler and web UI framework suited to small, standalone data-visualization projects. Its component model helps break complex interfaces into manageable parts while keeping development approachable. section 8.5.3 section 14.4
When combining Svelte with D3, separate responsibilities clearly:
- Let Svelte add, remove, and manipulate DOM elements through components. section 14.4
- Use D3 for visualization calculations such as scales, shape generators, and force layouts. section 14.4
- Avoid D3 data binding and use D3 transitions sparingly to prevent conflicts with Svelte. section 14.4
D3-controlled chart
Declare a reference variable, attach it to an element with bind:this, wait for onMount(), and select the mounted element with D3 to build a chart. A scatterplot component demonstrates this pattern. section 8.5.3
Figure 8.8 To allow D3 to control a portion of the DOM in Svelte, we declare a reference variable within the <script> tags and point to this variable from the DOM element we want to control using bind:this. Then we wait for the component to be mounted, using the onMount() lifecycle function, and call another function, where we’ll build the chart. Inside this function, we select the reference with D3 and start using it as usual.
Shows the complete reference-and-mount sequence for allowing D3 to control part of a Svelte component’s DOM. section 8.5.3
