Библиотека JS для отображения прямых ациклических графов (DAG)

Я пытаюсь создать браузерный инструмент, который позволяет вам проверять графики зависимостей, как они появляются в модульных системах языков программирования и Makefiles.

Я ищу структуру визуализации, которая делает рисунок для меня.

Требования: набор инструментов может

  • метки (и, надеюсь, ребра)
  • автоматически помещает график в нужный размер (мне не нужно гадать хорошие размеры), учитывая, что у меня есть бесконечное пространство (полосы прокрутки в порядке)
  • хорошо разместите график так, чтобы он не выглядел таким грязным
  • быть в порядке с <= 5000 узлов
  • работает только с JS (нет приложений Flash или настольных систем)

Необязательно, было бы неплохо, если бы он упростил перемещение узлов вокруг и выделил или спрятал части графика для лучшего обзора.

Не важно, какая поддержка используется (SVG, canvas, все отлично).

Я просмотрел довольно много библиотек до сих пор (особенно из библиотеки графической визуализации в JavaScript), но еще не нашел подходящего:

  • d3 хорош, но единственный node -граф, который он представляет, представляет собой график силы, который ориентирован на физику реального времени, После загрузки вам нужно подождать и следить за тем, чтобы физический движок стабилизировался. Мне не нужны анимации или Сила, и я хочу сразу показать график.
  • GraphDracula примеры в значительной степени то, что я ищу, но уже с 70 узлами и 400 краями, производительность чертежа становится очень плохой. Он также имеет очень мало documentation (пример 35 строк).

Знаете ли вы что-то, отвечающее моим требованиям? Спасибо!

Ответы

Ответ 1

В коммерческом сценарии вы можете рассмотреть yFiles для HTML:

Что касается ваших требований, он может:

  • Добавить любое количество меток в узлы и ребра
  • Обеспечить практически бесконечную область прокрутки/панорамирования/масштабирования.
  • Автоматически компонуйте свой график, используя большое количество алгоритмов автоматической компоновки. Для графиков зависимостей Иерархический Layouter очень хорошо подходит
  • отлично работает на настольных браузерах с большим количеством узлов. Тем не менее, в зависимости от визуальной сложности и структуры графика 5000 элементов могут быть сложными с сегодняшними реализациями браузера.
  • Это чистая библиотека Javascript без каких-либо зависимостей
  • Использует SVG в качестве основного бэкэнда, но также может использовать Canvas
  • Библиотека хорошо документирована, что необходимо с учетом ее сложности

Вот скриншот, показывающий некоторые из вышеперечисленных функций в действии - макет был рассчитан автоматически:

enter image description here

Отказ от ответственности: я работаю в компании, которая создает библиотеку. На SO/SE я не представляю своего работодателя. Это мой собственный пост.

Ответ 2

Dagre отлично подходит для построения графа (горизонтальное/вертикальное выравнивание, метки и т.д.) и имеет рендеринг D3.

https://github.com/cpettitt/dagre-d3 (проверьте изображения в конце)

https://github.com/cpettitt/dagre