Что использовать, для создания связей у html блоков?

Question

[Дима Паутов]

Добрый день! У меня встала задача, как сделать вот такое построение связей у html элементов.

Демо

Есть тестовая ссылка

Думал так, взять snap svg или Raphael и попробовать реализовать задуманное. Или же сделать всю схему прямиком на canvas, что наверно сложней и трудозатратно.

Так же предложили использовать d3.js. Ещё нашёл вот такую вот штуку

Подскажите как быть? Есть те, кто реализовывал нечто подобное или, может, у вас есть примеры подобных реализаций?

Comments

[Сергей delphinpro]

wofh-tools.ru/technology/#sci1
html элементы поверх канвы, линии на канве.
При резайзе окна пересчитываются координаты блоков, и перерисовываются линии.
У вас линии поверх элементов, значит канву располагайте сверху. Будет небольшой геморройчик с кликами по блокам. Но решаемо. Если в лоб - pointer-event для канвы. Но у вас там похоже и ховеры по линиям надо обрабатывать. Так что придется мышку самому обрабатывать. Сложнее, но реально.

[Сергей delphinpro]

Но самый очевидный вариант - рисовать svg.
Вашу задачу я бы сначала попробовал реализовать именно так, да и вы вроде так же подумали.

Answer 1

[Дмитрий Pacification]

Интересный сервис. Заинтриговали. Самому интересен вопрос про svg

Answer 2

[Dark Hole]

Рисовать на canvas. Можно целиком, а можно только линии. Предложу последнее.