Gráficos D3.js no Svelte
Renderize visualizações do D3 dentro de componentes Svelte usando vinculações reativas e ações.
Gráficos D3.js no Svelte é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Por que usar D3 com Svelte
D3 é a principal ferramenta de visualização de dados; a reatividade do Svelte torna seu uso mais fácil do que nunca.
Abordagem
Deixe o Svelte renderizar o SVG; use D3 para escalas, disposições e auxiliares.
Instalação
Adicione D3 ou submódulos específicos, como d3-scale e d3-shape.
npm install d3Escalas
Use as escalas do D3 para mapear os dados para pixels.
import { scaleLinear } from "d3-scale";
const x = scaleLinear().domain([0, 100]).range([0, width]);Renderização reativa de barras
Use {#each} para renderizar elementos orientados por dados.
{#each data as d}
<rect x={x(d.x)} y={y(d.y)} width="10" height={height - y(d.y)} fill="steelblue" />
{/each}Evite d3-selection
Deixe o Svelte gerenciar o DOM; recorra a d3-selection apenas para transições complexas.
Eixos
Renderize os eixos mapeando as marcações com {#each} e suas escalas.
Dicas de ferramentas
Adicione um estado de foco com mouseenter/mouseleave a cada forma; exiba uma dica de ferramenta posicionada.
Responsividade
Acompanhe a largura do contêiner com ResizeObserver; redimensione a escala quando ela mudar.
Animações
Use transições do Svelte nas formas SVG ou anime os intervalos das escalas com os armazenamentos de movimento.
Biblioteca de componentes
LayerCake é uma biblioteca de gráficos específica para Svelte, criada em torno desse padrão.
Verificação rápida
Qual parte do D3 é mais útil no Svelte?
Recapitulação
Use D3 para a matemática, como escalas e disposições, e Svelte para renderizar SVG. Evite d3-selection na maior parte do tempo para manter uma integração limpa.
Perguntas Frequentes
A aula “Gráficos D3.js no Svelte” é grátis?
Sim — o texto completo de “Gráficos D3.js no Svelte” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Gráficos D3.js no Svelte”?
Renderize visualizações do D3 dentro de componentes Svelte usando vinculações reativas e ações. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Gráficos D3.js no Svelte”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Usando Tailwind CSS com SvelteKit
- Gráficos D3.js no Svelte
- Mapas Leaflet com ações do Svelte
- Editores de rich text: Tiptap