SVGTree — HTML5-библиотека для рисования деревьев

При описании алгоритмов на деревьях у меня возникла небольшая проблема визуализации деревьев, записанных в Newick-формате. Для рисования деревьев можно использовать различные десктопные инструменты (например, в LaTeX для этой цели подходит замечательный пакет TikZ). Возникает вопрос, можно ли для рисования использовать веб-технологии; результатом моих недельных усилий в этом направлении стала небольшая JavaScript-библиотека SVGTree.

Как видно из названия, для рисования в SVGTree используется один из аспектов HTML5 — масштабируемая векторная графика (scalable vector graphics, SVG). SVG — язык разметки на основе XML, предназначенный для отображения векторной графики; SVG-изображения можно встраивать в обычные HTML-страницы и динамически изменять при помощи JavaScript. На нынешнее время SVG поддерживается в достаточной степени всеми основными веб-браузерами: Firefox, Chrome и даже Internet Explorer 11+. По сравнению с альтернативными методами, которые можно применить для отображения деревьев, у SVG есть несколько преимуществ:

  • Поскольку SVG — стандарт векторной графики, изображения легко масштабируются; SVG, в отличие от скалярной графики, отображаемой элементом HTML5 <canvas>, походит для огромных рисунков (порядка 10000×10000).
  • Внешний вид SVG можно менять при помощи таблиц стилей CSS, совершенно аналогичных таблицам для обычных HTML-страниц. Это позволяет разделить логику создания базовых элементов рисунка и их отображения.
  • К элементам SVG можно обратиться при помощи JavaScript DOM API почти так же, как к элементам HTML-страницы. При этом элементы SVG поддерживают базовые события (например, click), что упрощает реализацию интерактивности.

Библиотека доступна в виде Github-репозитория.

Несколько примеров использования библиотеки есть на этой странице, еще несколько приведено под катом.


С использованием SVGTree, приведенный в описании алгоритмов на деревьях пример выглядит так:

Дерево, соответствующее записи ((,A,)B,((C,D),E),(F,G))H;

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

Библиотека позволяет изменять настройки отображения. Например, можно сделать так, чтобы дерево рисовалось горизонтально (потомки справа от родительских вершин, а не снизу), а вершины обозначались квадратиками:

То же дерево со слегка измененными настройками

Созданные деревья поддерживают интерактивность: есть возможность настроить дерево так, чтобы можно было, например, добавлять и удалять вершины (при помощи клавиш Ins и Del, соответственно) и переименовывать их.

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

Пожалуй, наиболее эффектная возможность SVGTree — перетаскивание вершин. Если среди допустимых действий с деревом указать 'drag', любой узел дерева можно будет перетащить на новое место рядом с другим узлом. Если во время перетаскивания держать нажатой клавишу Ctrl, перетаскиваемое поддерево будет скопировано, а не перемещено.

Дерево с поддержкой перетаскивания

При этом можно перетаскивать вершины между разными деревьями, а если включить опцию dragAsText, то и между деревом и другими источниками!

Дерево с поддержкой текстового перетаскивания

Узлы дерева можно перетащить сюда: или отсюда: (A,B)C;.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *