Как сделать соединения объектов линиями и при этом, чтобы они были адаптивными?

Question

[persovt]

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

Вот и скрипт, да знаю, что можно было создать один элемент в html, а потом изменять ему значения, но я хотел по максимуму автоматизировать процесс через js.
https://codepen.io/Persovt/pen/WNwvmaO

Answer 1

[persovt]

Предлагаю свое решение топ 2020 года (нет). Я уверен, что код можно было сделать проще, короче, но все же это работает). Пока-что остается вопрос с адаптивностью данных кругов!

Answer 2

[Karpion]

Я не понял, какие исходные данные м.б. для задачи. И по каким принципам это надо отобразить.

Comments

[persovt]

Исходных данных нету. Просто нужно сделать, как на картинке, но при этом чтобы линии отрисовывались автоматически и меняли свое положение за объектом (кругом) и при этом когда меняешь размер страницы (делаешь меньше), объекты (круги) тоже меняли свое положение и не наезжали на друг друга - "не превращались в кашу".

[Karpion]

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

Есть ли гарантия, что граф планарный? Вы в курсе, о чём я?

В первом приближении:
Все палочки между кружками заменяем на пружинки, которые стремятся сохранить нужное расстояние - т.е. могут притягивать или расталкивать шары. Далее - добавляем силу, коотрая просто расталкивает все шары; это против налезания их друг-на друга. Далее добавим силу, заталкивающую шары в экран. Добавляем вязкое трение и ищем равновесную конфигурацию. Как-то так.

Дальше рассказывать?

[persovt]

Karpion, нужно сделать как на скриншоте. Расскажите.

[Karpion]

Т.е. именно с такими кругами и соединениями? Тогда просто нарисуйте GIF-картинку.

Answer 3

[Воващ]

решал подобную задачу
линии строил svg -> path
положение нужных фигур находил Element.getBoundingClientRect()

Ну и математика, в данном случае я бы поступил примерно так:
нашёл бы центры кругов, протянул бы path

стоит отметить, что каждый из path строится попарно, при рендере страницы => на разных устройствах решает задачу

Comments

[persovt]

Именно это решение я и представил выше. Но у вашего решения есть минус - это то, что положение объекта находится относительно страницы, а не блока. Как по мне, правильней будет искать положение от родительского блока.