Question

edit：想在ts类中使用numchildren变量，然后使用该变量来确定CSS中的边距？这是一个潜在的解决方案吗？（不知道我该怎么做）

所以我想重新利用/重新使用https://github.com/artbelikov/angular2-tree-diagram

（在此处https://artbelikov.github.io/angular2-tree-diagram/演示）

我已经编辑了该项目，以不切换某些框，以便可以同时扩展多棵树...现在，我正在尝试弄清楚如何在根节点/子节点之间强制空格多个展开时重叠。

我已经在这里上传了经过稍微编辑的项目

https://dbuirep.firebaseapp.com/

您可以看到扩展两个节点的子节点重叠 ...

有人有什么技巧或想法来实现这一目标吗？

:host {
  -webkit-print-color-adjust: exact;
  position: relative;
  display: block;
  -webkit-touch-callout: none;
  user-select: none;
  overflow: hidden;
  height: 100vh;
  text-align: center;
}

.tree-roots-elements {
  position: relative;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
  cursor: default !important;
  font-size: 0;
  transform-origin: center;
}

.tree-node {
  position: relative;
  display: inline-block;
  margin: 15px;
  vertical-align: top;
  &:only-of-type {
    > .line-to {
      display: none;
    }
  }
}

.tree-pane, .tree-paning-container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

<div class="tree-pane"
     (mousedown)="onmousedown($event)"
     (mouseup)="onmouseup($event)"
     (mousemove)="onmousemove($event)"
     (mousewheel)="onmousewheel($event)"
>
    <div class="tree-paning-container" [style.transform]="paneTransform">
        <div *ngIf="nodes" class="tree-roots-elements">
            <div [treeDiagramNode]="node.guid" class="tree-root tree-node" (mousedown)="preventMouse($event)" *ngFor="let node of nodes.roots"></div>
            <!-- <div [treeDiagramNode]="nodeMaker" (click)="newNode()" (mousedown)="preventMouse($event)" class="tree-root tree-new-node tree-node"></div> -->
        </div>
    </div>

</div>

感谢您阅读本文

节点之间带有CSS HTML强制空格的树形图

0 个答案: