Как нарисовать динамическое горизонтальное дерево с расширяемым div?

Expandable div

Используя angular 5, мне нужно нарисовать горизонтальное дерево.

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

До сих пор я реализовал эти блоки, но не знаю, как нарисовать эту линию, которая будет привязываться к блокам при их расширении.

Пробовал делать с d3js. но поскольку я новичок в d3, я был бы рад, если бы вы могли дать мне идею, какая функция или метод подойдет для такой строки

Я понятия не имею о d3.js, но вы можете попробовать дерево PrimeNG. primefaces.org/primeng/#/tree. Есть один вариант горизонтального дерева.

Parth Savadiya 11.04.2018 12:21

Могу ли я рисовать линии с помощью праймфейса, которые также будут перемещаться с помощью расширяемого поля? @pArthsavadiya

Kazi 11.04.2018 19:12

Нет, но доступна функция перетаскивания.

Parth Savadiya 12.04.2018 07:20
1
3
3 632
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать горизонтальное дерево primeng, которое дает вам ту же структуру, которую вы нарисовали. Ссылка - https://www.primefaces.org/primeng/#/tree. Еще одна библиотека, которую я нашел, - это ngx-graph. Воспользуйтесь следующей ссылкой. https://swimlane.github.io/ngx-graph/

enter image description here Изображение горизонтального стола Primeng с разворачиванием / сворачиванием.

Другие вопросы по теме