Графики D3.js в Svelte
Отображайте визуализации D3 внутри компонентов Svelte с помощью реактивных привязок и действий.
«Графики D3.js в Svelte» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Зачем использовать D3 с Svelte
D3 — король визуализации данных; реактивность Svelte делает его использование проще, чем когда-либо.
Подход
Пусть Svelte отображает SVG, а D3 отвечает за масштабы, компоновку и вспомогательные функции.
Установка
Добавьте D3 или отдельные подмодули, например d3-scale и d3-shape.
npm install d3Масштабы
Используйте масштабы D3 для преобразования данных в пиксельные координаты.
import { scaleLinear } from "d3-scale";
const x = scaleLinear().domain([0, 100]).range([0, width]);Реактивное отображение столбцов
Используйте {#each} для отображения элементов на основе данных.
{#each data as d}
<rect x={x(d.x)} y={y(d.y)} width="10" height={height - y(d.y)} fill="steelblue" />
{/each}Избегайте d3-selection
Пусть Svelte управляет DOM; обращайтесь к d3-selection только для сложных переходов.
Оси
Отображайте оси, преобразуя деления с помощью {#each} и своих масштабов.
Всплывающие подсказки
Добавьте состояние наведения с mouseenter и mouseleave для каждой фигуры; показывайте позиционированную подсказку.
Адаптивность
Отслеживайте ширину контейнера с помощью ResizeObserver и изменяйте масштаб при ее изменении.
Анимации
Используйте переходы Svelte для фигур SVG или анимируйте диапазоны масштабов с помощью хранилищ движения.
Библиотека компонентов
LayerCake — это библиотека диаграмм для Svelte, построенная на этом подходе.
Быстрая проверка
Какая часть D3 наиболее полезна в Svelte?
Итоги
Используйте D3 для математических вычислений, например масштабов и компоновки, а Svelte — для отображения SVG. В основном избегайте d3-selection для более чистой интеграции.
Часто задаваемые вопросы
Урок «Графики D3.js в Svelte» бесплатный?
Да — полный текст урока «Графики D3.js в Svelte» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Графики D3.js в Svelte»?
Отображайте визуализации D3 внутри компонентов Svelte с помощью реактивных привязок и действий. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Графики D3.js в Svelte»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Использование Tailwind CSS с SvelteKit
- Графики D3.js в Svelte
- Карты Leaflet с действиями Svelte
- Редакторы форматированного текста: Tiptap