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.