liveBook · Manning

Svelte reactive declaration

As explained in D3.js in Action, Third Edition

A Svelte reactive declaration is a statement whose computed value is automatically reevaluated when its referenced component state changes.

A Svelte reactive declaration uses the `$:` sign to rerun a statement whenever a referenced component variable changes. This makes computed layout values respond automatically to state such as the browser width. section 14.4.1

Responsive SVG dimensions

Bind `windowWidth` to `<svelte:window bind:innerWidth={windowWidth} />`, then compute `svgWidth`, `numColumns`, `numRows`, and `svgHeight` with reactive declarations. Svelte recalculates the values as the screen changes, and the SVG receives them through its `width` and `height` attributes. section 14.4.1

How D3.js in Action, Third Edition covers it

How deep it goes
Demonstrates reactive switches and chained derived values for columns, rows, small multiples, and SVG height.
Examples
Uses a responsive SVG grid whose width, column count, row count, and height change across screen-size thresholds.
What it assumes
Assumes basic Svelte component markup and JavaScript variables while demonstrating window binding and reactive computation.
What you can do after
Build it from scratch by declaring reactive layout calculations and binding their results to responsive SVG markup.
How it connects
Connects reactive declarations with data binding, browser dimensions, responsive design, SVG attributes, and D3 array generation.
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.