Sveltejs Academy · Lektion

D3.js-diagram i Svelte

Rendera D3-visualiseringar i Svelte-komponenter med reaktiva bindningar och actions.

Lektion 2 av 413 steg

D3.js-diagram i Svelte är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Varför D3 med Svelte

D3 är kungen inom datavisualisering, och Sveltes reaktivitet gör det enklare än någonsin att använda.

Tillvägagångssätt

Låt Svelte rendera SVG:n och använd D3 för skalor, layouter och hjälpfunktioner.

Installera

Lägg till D3 eller specifika delmoduler som d3-scale och d3-shape.

npm install d3

Skalor

Använd D3-skalor för att mappa data till pixlar.

import { scaleLinear } from "d3-scale";
const x = scaleLinear().domain([0, 100]).range([0, width]);

Rendera staplar reaktivt

Använd {#each} för att rendera datadrivna element.

{#each data as d}
  <rect x={x(d.x)} y={y(d.y)} width="10" height={height - y(d.y)} fill="steelblue" />
{/each}

Undvik d3-selection

Låt Svelte hantera DOM:en. Använd d3-selection endast för komplexa övergångar.

Axlar

Rendera axlar genom att mappa markeringar med {#each} och dina skalor.

Verktygstips

Lägg till hover-tillstånd med mouseenter/mouseleave på varje form och visa ett positionerat verktygstips.

Responsivitet

Spåra containerns bredd med ResizeObserver och skala om när den ändras.

Animeringar

Använd Svelte-övergångar på SVG-former eller interpolera skalintervall med motion-stores.

Komponentbibliotek

LayerCake är ett Svelte-specifikt diagram bibliotek som bygger på det här mönstret.

Snabb kontroll

Vilken del av D3 är mest användbar i Svelte?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Använd D3 för matematik, som skalor och layouter, och Svelte för att rendera SVG. Undvik d3-selection för en ren integration, utom när det verkligen behövs.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”D3.js-diagram i Svelte” gratis?

Ja – hela texten till ”D3.js-diagram i Svelte” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”D3.js-diagram i Svelte”?

Rendera D3-visualiseringar i Svelte-komponenter med reaktiva bindningar och actions. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?

Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”D3.js-diagram i Svelte”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?

Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Sveltejs Academy