Svelte — это JavaScript-фреймворк для разработки веб-приложений. Ключевое отличие Svelte от других фреймворков, таких как Vue или React, заключается в том, что Svelte является компилятором JavaScript и выполняет большую часть своей работы на этапе компиляции. Это означает, что ему не нужно отправлять большие накладные расходы в браузер вашего пользователя и управлять вещами во время выполнения.
Svelte набирает популярность в сообществе визуализации данных. В недавнем выпуске подкаста Data Stories они берут интервью у Амелии Ваттенбергер о Svelte. Я бы также порекомендовал это видео на YouTube от Matthias Stahl, показывающее, как он использовал Svelte для разработки этой визуализации.
Подсказки
Я хотел создать визуализацию биржевых диаграмм с помощью D3 и Svelte, но не смог найти хороших примеров использования Svelte для всплывающих подсказок, которые мне нужны. В Svelte tutorial они предлагают действия и директиву use
как хорошие способы обработки всплывающих подсказок.
Действия можно использовать для управления жизненным циклом элемента. Они вызываются при создании элемента, они могут добавлять и удалять прослушиватели событий и возвращать функцию уничтожения при удалении элемента. Это было бы здорово для всплывающих подсказок, которые появляются и исчезают в зависимости от наведения, прикосновения или щелчка. Однако я хотел создать постоянные всплывающие подсказки, которые указывали бы значения X и Y для выбранной позиции на диаграмме. Поэтому я создал другой подход.
Вот конечный результат:
Развернутая версия: https://svelte-project1.vercel.app/
Гитхаб: https://github.com/toltman/svelte-project1
Стиль диаграммы более или менее основан на Диаграмме с областями со страницы примеров Svelte. Я добавил вертикальную линию, указывающую позицию x (дата), и горизонтальную линию, указывающую позицию y (цена закрытия акции за день). В черном поле вверху отображается выбранная в данный момент дата, а в черном поле справа отображается выбранная в данный момент цена акции. Зеленое поле справа является статическим и показывает конечную цену акции на последнюю дату, а серое поле указывает цену закрытия акции на первую дату в данных. Я также добавил точку, которая отображается в виде черной точки поверх линии в выбранной позиции.
Ниже приведен аннотированный снимок экрана с метками для всех элементов всплывающей подсказки:
Я также создал упрощенную версию этой подсказки в Svelte REPL. Это копия + вставка диаграммы с областями, упомянутой выше, с моими TooltipLines.svelte и TooltipPoint.svelte, добавленными для вертикальных и горизонтальных линий, и точечным маркером, который находится поверх линии.
Ниже приведен код элемента div
моей диаграммы. Вы можете видеть, что TooltipRight используется несколько раз для начального значения, последнего значения и значения переменной point
. TooltipTop и TooltipRight содержат элементы div и находятся за пределами элемента svg
. Внутри svg
у нас есть TooltipLines, Axes, ChartArea, ChartLine и маркер TooltipPoint.
Элемент svg
имеет прослушиватель для mousemove и связанную с ним функцию handleMousemove
. Стоит просмотреть код этой функции.
bisector
— это функция, предоставляемая d3. Он принимает отсортированный массив (в данном случае массив объектов, отсортированных по Date
) и значение и находит индекс в массиве, куда можно было бы вставить значение. Таким образом, основываясь на нашей позиции x мыши, он находит индекс в нашем массиве, где находится ближайшая точка данных. Мы обновляем point
, чтобы оно стало этим значением данных. Теперь point.Date
— это наше значение x, а point.Close
— наше значение y.
Теперь давайте посмотрим, как это используется в TooltipPoint.svelte
.
Обратите внимание, что из Chart.svelte
выше мы отправляем TooltipPoint
значение x xScale(point.Date)
и yScale(point.Close)
. В этой точке просто рисуется черный круг радиусом 3.
Вы можете увидеть весь остальной код на моем github по адресу https://github.com/toltman/svelte-project1.