Направленный ациклический граф в веб-интерфейсе

Мне нужно отобразить направленный ациклический граф на веб-странице. Я не ищу готовую библиотеку или решение. Я ищу предложения, рекомендации или толчок в правильном направлении.

<сильный>1. Визуализация DAG

Я не уверен, как будут представлены узлы и отношения. Жизнеспособными решениями могут быть карты деревьев, старый добрый узел и линия или их комбинация. У меня нет проблем, если один узел появляется на экране более одного раза.

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

Я открыт для всех предложений и советов.

<сильный>2. Технология

Есть некоторые функции, которые должна иметь реализация:

  • перетаскивания
  • увеличить
  • события при взаимодействии мыши с узлами

С моей точки зрения, у меня есть 2 варианта (Flash не может быть и речи):

а. Холст HTML5

Недостатки: нет векторов, в основном просто изображение; отсутствие неявных событий мыши на узлах;

Преимущества: скорость; популярность; анимации

б. SVG

Недостатки: низкая скорость при большом количестве узлов;

Преимущества: векторная графика; элементы находятся в DOM, так что вы можете иметь события и так далее;

в. Сочетание HTML5 Canvas и SVG


person morsanu    schedule 25.11.2011    source источник
comment
Вам нужно отобразить изображение, вычисленное и опубликованное, или что-то, что вычисляется динамически?   -  person Codie CodeMonkey    schedule 25.11.2011
comment
Я бы использовал SVG, если только у вас нет очень большого количества элементов (например, стрелок), для которых не требуется обработка событий и для которых использование SVG слишком сильно замедляет скорость. Обратите внимание, что вы можете прокручивать и масштабировать холст HTML5 в векторной манере.   -  person Phrogz    schedule 25.11.2011


Ответы (1)


Предполагая, что вы хотите динамически обновлять свой график, вы, вероятно, могли бы использовать python на сервере с pydot. Модуль ГрафВиз.

Я не пробовал это, но это то, на что стоит обратить внимание.

person Codie CodeMonkey    schedule 25.11.2011