HTML 5: как реализовать сложную сеть

Question

Каков правильный подход, если вы планируете реализовать (сложную, интерактивную) сетевую диаграмму в «HTML5», которая является частью инструмента моделирования - например, чтобы позволить пользователю спроектировать рабочий процесс?

Является ли SVG правильным подходом или использует напрямую Javascript / Canvas?Есть ли какое-нибудь продуктивное приложение, которое доказало бы, что это возможно в HTML5 (сетевая модель может быть довольно сложной), особенно в отношении производительности?

Мне не нужны какие-либо подробности реализации, просто подсказка для«правильная» технология, если вас «заставят» делать это в HTML5 ...

Спасибо.

Answer 1

svg теперь имеет поддержку от ie9. canvas поддерживается в большинстве современных браузеров, а css поддерживается всеми.

svg обладает тем преимуществом, что его можно масштабировать («изображение» является векторной картой, поэтому пользователь может иметь его в любом размере, который он предпочитает), но производительность рендеринга beeing немного дерьмовая. Вы можете привязать некоторые события к элементам ..

холст похож на GDLib или ImageMagick, у вас есть белый лист, на который можно наносить график. Поэтому, если вы вносите изменения, вам сначала нужно очистить холст и перерисовать все. Вы не знаете, на какой элемент щелкнул пользователь, и можете связывать события только для всего элемента canvas.

Использование HTML и DOM с CSS было бы альтернативой, поскольку вы просто можете начать перемещать элементы сети arround и связывать события с узлами вашей сети. Но строки довольно сложно реализовать (можно использовать повернутый div с верхней границей)

Лично я бы выбрал гибрид между svg и обычным html, но опять же, я не знаю всех вариантов использования вашего приложения.