Вопрос или проблема
Я давно ищу библиотеку графиков, которая бы поддерживала все необходимые функции, после того как я попробовал vis.js, echarts, recharts и т.д.
Требования к проекту:
- разворачивающееся дерево при нажатии на узел
- события на узлах / ребрах
- подписи / всплывающие подсказки как на ребрах, так и на узлах
Лучше всего, если будет поддержка React и рендеринг HTML-компонентов как узлов и ребер.
Как вы, вероятно, уже знаете, D3JS считается многими лучшей библиотекой для построения графиков на JS – просто посмотрите на отличные примеры
Поиск по запросу collapsible D3JS дал несколько результатов, так что, похоже, это возможно. У меня нет времени искать именно реализацию, поэтому, пожалуйста, поищите и исследуйте это сами.
Смотрите, например, https://stackoverflow.com/questions/30496291/how-to-create-d3-js-collapsible-force-layout-with-non-tree-data
И этот демонстрационный пример.
Вот ваш ответ, но вам нужно будет писать код 🙂
Мое предложение – попробовать библиотеку Syncfusion React Diagram.
Я создал пример с разворачивающимися узлами с подписью, всплывающей подсказкой и уведомлением с использованием событий диаграммы. Найдите пример по следующей ссылке.
пример: https://xvk22yvl4.codesandbox.io/
Исходный код: https://codesandbox.io/s/xvk22yvl4
В этом примере я создал событие клика для узла, когда вы нажимаете на узел, появляется сообщение с предупреждением. Для полной документации по API посетите здесь
Другие связанные ссылки:
Демонстрация всплывающих подсказок,
UG для создания подписей с использованием аннотаций
Примечание: Я работаю в компании Syncfusion
Ответ или решение
Выбор библиотеки для построения графиков в React — это непростая задача, учитывая разнообразие доступных решений. После анализа ваших требований и упоминания различных библиотек, таких как vis.js, echarts и recharts, я бы рекомендовал обратить внимание на несколько опций, которые могут удовлетворить ваши потребности в построении графиков с возможностью разворачивания деревьев по клику, событий на узлах и рёдрах, а также поддержки HTML-компонентов как для узлов, так и для рёдров.
1. D3.js
D3.js является одной из самых мощных библиотек для визуализации данных, но требует больше усилий для интеграции с React. С её помощью возможно создание коллапсирующих деревьев. Вы можете почерпнуть идеи для реализации таких функций, как:
- События на узлах и рёдрах: вы можете настроить прослушиватели событий на узлах, реагируя на взаимодействия пользователя.
- Всплывающие подсказки и метки:D3 позволяет встраивать любой HTML или SVG контент, что даёт возможность реализовывать продвинутые.tooltip и метки.
Свойство D3.js, позволяющее манипулировать DOM, может быть немного сложным в контексте использования с React, так как они оба пытаются управлять одной и той же частью UI, но есть множество примеров и ресурсов, которые могут быть вам полезны.
2. Syncfusion React Diagram
Как уже упоминалось в вашем запросе, Syncfusion предлагает библиотеку React Diagram, которая полностью соответствует вашим требованиям. Вот некоторые ключевые особенности:
- Коллапсирующие узлы: Библиотека позволяет легко реализовывать функционал коллапсирования узлов при нажатии на них.
- События: Вы можете обрабатывать события на узлах и рёдрах, например, выводя уведомления или меняя состояние приложения.
- Подсказки и метки: Syncfusion поддерживает добавление аннотаций и популярных меток, которые могут быть настроены для ваших узлов и рёдров.
К тому же, Syncfusion оптимизирована для работы с React, что значительно упрощает процесс разработки.
Пример
Рабочий пример можно найти здесь, где продемонстрированы кликовые события и добавление подсказок. Полную документацию по API можно изучить здесь.
3. React Flow
Другой вариант — использование библиотеки React Flow. Эта библиотека специально разработана для работы с графами и узловыми структурами. Она выделяется своей простотой интеграции с React:
- Динамическое обновление состояния: React Flow позволяет манипулировать состоянием узлов, что делает его идеальным для реализации взаимодействий.
- События и метки: Поддерживает события и кастомизацию узлов с использованием HTML и SVG.
Заключение
Для ваших требований наилучшим решением будет использование Syncfusion React Diagram или React Flow, в зависимости от ваших предпочтений в стилях разработки и необходимых функциональных возможностях. D3.js также является отличным вариантом, но может потребоваться дополнительное время на изучение и интеграцию с React.
Если у вас есть дополнительные вопросы или необходима помощь с конкретной реализацией, не стесняйтесь обращаться!