В прошлом я написал кучу постов, в которых объяснял, как интегрировать библиотеку D3 и React. В этом посте я сделаю то же самое, но на этот раз покажу вам, как интегрировать D3 в приложения Qwik. Мы вместе построим дерево D3 и разместим его в простом приложении Qwik.

Вы готовы?

Что нужно сделать, прежде чем вы начнете добавлять предлагаемый код:

1. Создайте новое приложение Qwik с помощью команды npm create qwik@latest.

2. Добавьте в приложение новый маршрут, который будет использоваться для отображения графика D3.

Создание компонента-контейнера Qwik D3

Сначала вы добавите новый компонент TreeContainer. Этот компонент будет отвечать за хранение контейнера D3, который будет использоваться для создания графа.

Давайте посмотрим на код:

TreeContainer будет элементом div, который D3 будет использовать для создания графа. Вы используете сигнал для ссылки на визуализированный div, поэтому позже вы сможете использовать его представление HTML-элемента в памяти.
Вы также можете заметить использование useVisibileTask$. D3 работает только в браузере пользователя, а не на сервере. Поэтому вам следует использовать в своем коде хук useVisibileTask$. Этот хук гарантирует, что часть вашего кода, отвечающая за создание графа, будет выполнена после рендеринга компонента на стороне клиента.

Создание генератора графиков

Когда контейнер готов, пора написать функцию createGraph.

Вот полный код функции:

Давайте проанализируем код, чтобы понять, что происходит. Мы начнем с функции processSymbols.

Иногда у нас есть модель, которая не соответствует тому, как графики D3 ожидают свои данные. Функция processSymbols преобразует массив символов в необходимое графическое представление.

В начале функции createGraph вы устанавливаете реализацию дерева d3 в памяти. Это происходит в этих строках кода:

Затем вы создаете визуальное представление дерева с помощью API D3, который создает элементы SVG, такие как пути, круги, текст и многое другое:

Данные, которые используются в примере, представляют собой следующий массив символов:

После того, как вы подключите все, вы можете запустить приложение, чтобы увидеть следующий график на экране:

Краткое содержание

В посте я показал вам, как легко интегрировать D3 в приложения Qwik. В посте рассказывается, как создать контейнер графа, а затем как создать граф с помощью функций D3.

Посмотреть весь пример можно в репозитории qwik-d3-example.