# antv-tree-graph

> a base in G6 tree graph module

Latest version **0.0.2** (published 2020-11-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install antv-tree-graph
pnpm add antv-tree-graph
yarn add antv-tree-graph
bun add antv-tree-graph
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-11-13 |
| First published | 2020-11-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | ChrisChen |
| Maintainers | chrischengz |

## Links

- npm: https://www.npmjs.com/package/antv-tree-graph
- Repository: https://github.com/ChrisChenSZ/antv-tree-graph
- Homepage: https://github.com/ChrisChenSZ/antv-tree-graph#readme
- Issues: https://github.com/ChrisChenSZ/antv-tree-graph/issues
- npm.io page: https://npm.io/package/antv-tree-graph

## Dependencies (3)

- [@antv/g6](https://npm.io/package/@antv/g6.md) ^3.8.1
- [insert-css](https://npm.io/package/insert-css.md) ^2.0.0
- [@antv/g-base](https://npm.io/package/@antv/g-base.md) ^0.5.1

## Recent versions

- 0.0.2 (latest) — 2020-11-13
- 0.0.1 — 2020-11-13

## README

##### tree-graph 基于 G6 的开箱即用应用

> ##### 安装

yarn add tree-graph --save --registry https://nexus.alltosea.com/repository/nhc-npm-group/

> ##### 主要实现功能

-  右键菜单
-  节点 hover 效果
- 数据驱动
- 画布自适应

> ##### demo

```
 import TreeGraph from 'tree-graph';
 const data = {

    "id": "0",
    "level": 0,
    "collapsed": false,
    "dataType": "root",
    "name": "2020.03.12 13:03 hwx测试",
    "data": {},
    "children": [
      {
        "id": "1336529001644064",
        "fid": "0",
        "level": 1,
        "collapsed": true,
        "dataType": "",
        "name": "2020.03.12 13:03 申请资源名称2",
         "conextMenu": []
        "data": {
          "isImmediate": true,

        },
        "children": [
          {
            "id": "1336534944972832",
            "fid": "1336529001644064",
            "level": 2,
            "collapsed": true,
            "dataType": "",
            "name": "测试三",
            "data": {}
          }
        ]
      },
      {
        "id": "1336528909369376",
        "fid": "0",
        "level": 1,
        "collapsed": true,
        "dataType": "",
        "name": "2020.03.12 13:03 申请资源名称",
        "conextMenu": [
            {
              "name": "资源表:来穗人口调查",
              "data": {}
            },
            {
              "name": "附件",
              "data": {}
            }
          ]
        "data": {

        }
      },
      {
        "id": "1336532740866080",
        "fid": "0",
        "level": 1,
        "collapsed": true,
        "dataType": "",
        "name": "测试",
        "data": {}
      }
    ]

}
 const config = { data:data, container:'container'};
 console.log('config', config);
 const taskRelationshipDiagram = new TreeGraph(config);
```

#### API

##### data

| 参数              | 说明                           | 类型    | 默认值 | require |
| ----------------- | ------------------------------ | ------- | ------ | ------- |
| id                | 节点唯一标识                   | string  | -      | true    |
| fid               | 父节点 id（最顶层节点可不传）  | string  | -      | true    |
| level             | 节点层次                       | number  | -      | false   |
| collapsed         | 是否展开                       | boolean | false  | false   |
| name              | 节点 title                     | string  | -      | false   |
| data              | 模型数据                       | object  | -      | false   |
| conextMenu        | 右键菜单                       | array   | -      | false   |
| children          | 子节点                         | object  | -      | false   |
| disableExpandIcon | 隐藏展开收宿 icon              | boolean | false  | false   |

##### data.conextMenu

| 参数 | 说明               | 类型   | 默认值 | require |
| ---- | ------------------ | ------ | ------ | ------- |
| name | 右键菜单列表 title | string | -      | true    |
| data | 右键菜单列表数据   | object | -      | false   |

##### treeGraph.Graph

返回图表的载体,等同 G6.Graph 用  法可参考 https://g6.antv.vision/zh/docs/api/Graph

#### 回调参数

##### treeGraph.conextMenuClick

右键菜单回调函数

| 名称 | 类型   | 描述                 |
| ---- | ------ | -------------------- |
| data | object | conextMenu.data 数据 |

```
例：treeGraph.conextMenuClick(
  function(data) {}
)
```

---
_Source: https://npm.io/package/antv-tree-graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._