Angular 2+ 树图组件

Angular 2+ 树图组件
插件名称 angular2-tree-diagramm
发布时间 2020年8月26日
插件作者 artbelikov

Angular 2+分层UI模块,可在Web应用程序上呈现可自定义的树形图。

特征:

  • 拖放
  • 缩放和平移
  • 可配置的节点宽度/高度
  • 添加/删除节点
  • 树状UI
  • 纯CSS关系线
  • 没有依赖

安装:

npm i angular2-tree-diagramm

用法

  • 在您的项目中导入模块
  • 使用树形图指令
  • 传递节点数组和配置
  • 有关更多详细信息,请参见example.json

<tree-diagram [data]="data"></tree-diagram>
...
data = {
  json: [
    {
      "guid": "bc4c7a02-5379-4046-92be-12c67af4295a",
      "displayName": "Elentrix",
      "children": [
        "85d412c2-ebc1-4d56-96c9-7da433ac9bb2",
        "28aac445-83b1-464d-9695-a4157dab6eac"
      ]
    },
    ...
  ],
  config: {
    nodeWidth: 200,
    nodeHeight: 100
  }
}