# datag-graph

> dataq-component 模板

Latest version **0.0.7** (published 2021-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install datag-graph
pnpm add datag-graph
yarn add datag-graph
bun add datag-graph
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2021-05-14 |
| First published | 2021-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 83 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | cctv1005s |

## Links

- npm: https://www.npmjs.com/package/datag-graph
- npm.io page: https://npm.io/package/datag-graph

## Dependencies (6)

- [tslib](https://npm.io/package/tslib.md) ^2.1.0
- [jquery](https://npm.io/package/jquery.md) ^3.6.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.20
- [@antv/graphin](https://npm.io/package/@antv/graphin.md) ^2.0.0
- [@antv/graphin-icons](https://npm.io/package/@antv/graphin-icons.md) ^1.0.0
- [@antv/graphin-components](https://npm.io/package/@antv/graphin-components.md) ^2.0.0

## Recent versions

- 0.0.7 (latest) — 2021-05-14
- 0.0.6 — 2021-05-12
- 0.0.5 — 2021-05-11
- 0.0.4 — 2021-03-22
- 0.0.3 — 2021-03-18
- 0.0.2 — 2021-03-18
- 0.0.1 — 2021-03-09

## README

# DataG-Graph

> 前端图形渲染组件

![](https://duing.alibaba-inc.com/img/label?keyBgColor=f66901&key=Project&value=DataQ)

## 特性

- 自定义节点渲染样式
- 网状节点渲染
- 节点事件响应
- 小地图
- 自动布局
    - 力导向布局
    - 环形布局
    - 重力布局


## 例子

- `React`：参见目录下 `example`
- `Vue`: 参见目录下 `vue-example`

## Props

| 属性名 | 属性类型 | 默认值 | 说明 |
| ---- | ---- | ---- | ---- |
| data | IData | {} | 定义往下看 |
| layout | Object | `{type: 'concentric'}` | 布局类型参见下方表格|
| minimap | Boolean | `true` | 是否打开小地图 |
| dragble | Boolean | `true` | 节点是否可拖拽 |
| moveable | Boolean | `true` | 画布是否可移动 |
| onNodeClick | Function | `noop` | 节点点击函数 |
| onCanvasClick | Function | `noop` | 画布点击函数 |
| onEdgeClick | Function | `noop` | 边点击函数 |
| onNodeDrag | Function | `noop` | 节点拖动函数 |
| graphRef | Object | { updateItem: (item, cfg) => {} } | graph实例引用 |
| minimapTopRight | Object | { top: 0, right: 0 } | 控制小地图的位置
| didMount | Function | 获取Graph内部的graph用来操作node节点与edges线条的样式
| theme | Object | 设置主题 https://graphin.antv.vision/graphin/render/theme


```ts
    // 数据类型
    interface IData {
        nodes: {
            id: string;         // 节点ID
            label: string;      // 节点文字
            type: string;       // 节点类型: graphin-circle(圆形) 
            style: IStyle       // graphin-circle（原型） rect（方形）
        }[],
        edges: {
            target: string;     // 目标节点ID
            source: string;     // 源节点ID
            style: IStyle       // 边类型
        }[]
    }

    interface IStyle {
        keyshape: {
            stroke: string; // 边颜色
            fill: string;   // 填充颜色
        },
        label: {
            value: string;  // 文字内容
            stroke: string; // 文字颜色
        }
    }
```

**布局取值**
| 取值 | 含义 | 其他 |
| ---- | ---- | ---- |
| `concentric` | 同心圆布局 | |
| `graphin-force` | 重力布局 | |
| `radial` | 辐射布局 | |
| `dagre` | 分层布局 | |
| `circular` | 环形布局 | |

## 开发

```bash
$ make install && npm start # 这个命令帮助启动 vite
```

## 构建

```bash
$  npm run build
```

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