угловой пирамидальный рекурсивный html-дисплей

Question

Я пытаюсь отобразить рекурсивную диаграмму в виде пирамиды, но борюсь с базовой реализацией CSS html

моя текущая реализация здесь ...

https://dbuirep.firebaseapp.com

цель состоит в том, чтобы у вас были сбалансированные деревья даже при несбалансированных поддеревьях ... это управляемо?

.div1 {

}

.div2 {
  display: inline-block;
  vertical-align: top;
}

.div3 {
  display: inline-block;
}

<div class="div1">
  <div class="div2" *ngFor="let node of treeData">
    <div class="div3">
        {{node.name}}
    </div>
    <div><app-tree-view [treeData]="node.subnodes"></app-tree-view></div>
  </div>
</div>

Answer 1

Я предлагаю вам использовать FlexLayout от Angular. Это независимая библиотека, которая позволяет вам эффективно решать все ваши проблемы с позицией.