Clyune Component GalleryHierarchy List · How it works & code
A collapsible indentation tree with value tracks showing the proportion of the whole.
Runtime logic
Visiting `/dataviz/hierarchy`, DemoHost lazy-loads `demos/kits/kit-dataviz.js` (registry `mod: 'kit-dataviz'`) and calls `mount(host, { variant: 'hierarchy' })`. mount resolves the variant to family `hierarchy`; `withControls` builds the control panel (6 presets + sliders). `createCanvasStage` creates the `<canvas>` (HiDPI ≤ 2×, ResizeObserver) and the info panel. The family’s `build(S)` initialises state and returns the per-frame callback. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Pointer down/drag/move updates the interaction (drag handles, hover readouts); when untouched and auto-demo is on, the pointer follows a Lissajous path. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21
Dependencies
react 18.3.1
Imported APIs
withControls — Wraps the demo in the shared control panel (presets, sliders, reset); hot-updates or remounts on change; paramsFromSpec — Turns the spec (colour/speed/size/count/extras) into control-panel parameter definitions; createCanvasStage — Shared Canvas 2D stage: canvas + info panel, HiDPI, one rAF loop, pointer state, idle auto-pointer; rng — Seeded deterministic PRNG (same seed, same result); hueOf — Hue of a colour (0–360°); clamp — Clamps a value to a range; TAU — Constant 2π; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.onDown — Pointer down; S.clear — Clears with the background colour (translucent = trails); S.get — Reads current control values; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.fillRect() — Fills a rectangle; ctx.beginPath() — Starts a new path; ctx.moveTo() — Moves the pen without drawing; ctx.lineTo() — Adds a straight line to a point; ctx.stroke() — Strokes the current path; ctx.fill() — Fills the current path; ctx.strokeRect() — Strokes a rectangle; ctx.arcTo() — Adds an arc using tangent lines; ctx.closePath() — Closes the current sub-path; ctx.fillText() — Draws filled text; ctx.measureText() — Measures text width
Source code
frontend/src/demos/kits/kit-dataviz.js: FAM.hierarchy (L560-L604)
Code walkthrough
L562-562: Control definitions (colour/speed/size/count/extras): Value track color, Row Height, Level depth, Indentation px, Value track, Auto expand/collapse. L563-563: Preset buttons: name → parameter overrides (6). L564-572: Info-panel content: live rows(v), formula, notes, params, steps. L573-603: Init function: sets up state and returns the per-frame callback: registers pointer handlers `S.onDown`; draws with Canvas 2D `fillRect`, `beginPath`, `moveTo`, `lineTo`, `stroke`, `fill` …; math via `Math.round`, `Math.max`, `Math.min`, `Math.exp`; returns readouts `tot`, `vis`, `path`, `val`, `pv`, `sp`, `sa` … to the info panel.
Principles
Line order = tree front and back (father and son) x Retreat into = Hierarchy d × Indent Width Parent Node Value = Σ subpoint values;number bar length = 值 / Root value Folders, structures, directories Tree . The most common way to show it is Indent List : The sub-point is Disabilities under the parent node and indents the right one▶ / ▼ indicates that it can be expanded or folded. Right on every row Value track This means that it accounts for the overall proportion (e.g. the size of the folder) and that the value of the parent node is equal to the sum of all the children, so that the combined article of the extended child is exactly equal to that of the father. Click Expand lines with triangles/Folding;opening"Automatically Expand"时会自己轮流演示。指针悬停查看路径和占比。