Архив за месяц: Июль 2015

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-репозитория.

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

Continue reading