На чём и как рисовать графические связи?

Question

[Игорь Васильев]

Здравствуйте.
--
Хотелось бы узнать, как на javascript (возможно на другом языке программирования), рисуются вот такие кривые:

Дело в том, что нужна адаптивность, чтобы не съезжало не сползало, есть div 1 , и есть div 2 = между ними кривая, которая показывает связь, при чём я видел, что эта технология хорошо работает на Mac, Linux, Windows, iOs, Android
Только я не знаю, как это называется, и как это работает.

Я нашёл даже живой пример, где можно создавать такие кривые online drichard.org/mindmaps

Кто с этим сталкивался?
Пожалуйста, подскажите, как это называется, как это рисовать? (не обязательно динамическое)

Answer 1

[roswell]

Cytoscape.js, jsPlumb, тысячи их...

Comments

[Игорь Васильев]

Благодарю вас))

Answer 2

[xmoonlight]

1. https://github.com/dabeng/OrgChart
2. (no js, responsive) https://codepen.io/siiron/pen/aLkdE

Comments

[roswell]

Честно говоря, d3 я бы не порекомендовал. Уж слишком тяжёлая артиллерия o)

[xmoonlight]

roswell, если человеку понадобился один тип диаграммы, значит с 99.9% долей понадобится и другие)
А так-то - да... Нелёгкая)

[Игорь Васильев]

xmoonlight, так как это называется? Мне не обязательно рисовать как в MindMap
К примеру надо нарисовать что есть деректор, у деректора 3 заместителя директора, у одного заместителя директора есть тот то и тот то подчинённый, и так, в виде матрицы разрисовать всю иерархию предприятия, ну понятен пример? О чём я.

[Игорь Васильев]

roswell, как это называется?

[roswell]

Игорь Васильев, обычно всё это дело называется 'graph visualization', сиречь "визуализация графов". А линии между вершинами графа, что на рисунке из примера -- кривые Безье.

[xmoonlight]

Игорь Васильев, roswell, ответил, исправив основной ответ.

[roswell]

xmoonlight, ну, это ведь частный случай; всё это можно и ранее приведёнными библиотеками отрисовать. ЗЫ чёт с фамилии последнего коммиттера прямо в голосину... o)

[xmoonlight]

roswell, :))) Вот ещё без JS и Responsive: https://codepen.io/siiron/pen/aLkdE
Прям чудо что сотворили)

[Игорь Васильев]

И вас благодарю, теперь легче искать, вы даже больше помогли, закрыли ещё 85% моих вопросов по реализации. Всё это пригодится. Дай бог вам здоровья и дающих красивых девушек.

[xmoonlight]

Игорь Васильев, Спасибо! Второй коммент - сработал как и ожидалось! :)

[roswell]

xmoonlight, нннну, такое себе решение, правда, больше похоже на задротство 80-го уровня. Если, например, убрать ul.subdirector, по схеме выйдет, что начальство само по себе и подчинённые сами по себе.

[xmoonlight]

roswell, ну не надо убирать ничего)))

[roswell]

xmoonlight, тогда вообще не понимаю, зачем было заморачиваться, можно и просто картинку нарисовать o)

[xmoonlight]

roswell, она не респонзив и hover/click - там нереально сделать)
а так: davidjbradshaw.com/imagemap-resizer/example задротство -80 уровня) и лучше так не делать))

[roswell]

xmoonlight, зато, как видно -- вполне реально. Хотя после этого хочется глаза с мылом помыть.

[Игорь Васильев]

roswell, мне поплохело вообще после того что я увидел по ссылке )))

[Игорь Васильев]

Вот что значит не придавать значение мелким деталям. Чревато не заметит бревно в глазу))
Познавательно, сразу вспомнился материал по математике, геометрии. Даже стыдно стало...