- [在线体验] todo
- [代码仓库](https://git.datagrand.com/frontend_utils/bixi-graph)

# 高级图组件

## 1. 安装使用

### 安装依赖

```
yarn add @bixi/graph
```

本项目集成多个图组件（股权结构图、环形树图、力导向图），使用按需加载。

```
import { EquityGraph, RadialTree, Force } from '@bixi/graph';
```

### 组件使用

1. 力导向图

```javascript
import { Force, IOptions, IGraphData } from "@bixi/graph";

@Component({
  selector: 'app-demo',
  template: `<div #workspace></div>`,
})
export class SomeComponent {
  @ViewChild("workspace", { static: true }) workspace: ElementRef;
  graphData: IGraphData;
  graphOptions: IOptions;
  canvas = new Force(
      this.workspace.nativeElement,
      this.graphData,
      this.graphOptions,
      tooltip
    );
```

2. 股权结构图

```javascript
import { DashboardAnalysisService } from '@routes/dashboard/services';
import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { EquityGraph } from './equity-graph';
import graphData from './graph-data';
@Component({
  selector: 'app-equity-graph.component',
  templateUrl: './equity-graph.component.html',
  styleUrls: ['./equity-graph.component.less']
})
export class EquityGraphComponent {
  @ViewChild('treeElement')
  treeElement: ElementRef;
  graphObj;
  constructor(private analysisService: DashboardAnalysisService) {}
  ngOnInit(): void {}
  ngAfterViewInit() {
    setTimeout(() => {
      this.graphObj = new EquityGraph(this.treeElement.nativeElement);
      this.graphObj.render(graphData.data, 2074794);
      this.graphObj.on('onRequireUpdate', (e) => {
        var n = e.d,
          r = e.isGudong;
        setTimeout(() => {
          this.graphObj.updateTree(r, n);
        }, 0);
      });
    }, 0);
  }
}
```

3. 环形树状图

```javascript
import { RadialTree, Options, GraphData } from '@bixi/graph';

@Component({
  selector: 'app-demo',
  template:
    '<div id="Radial-Tree-Graph" style="width: 100%; height: 800px; overflow: hidden"></div>',
})
export class RadialTreeComponent implements AfterViewInit {
  chart: RadialTree;
  @Input()
  options: RadialTreeOption;
  @Input()
  data;
  constructor() {}

  ngOnInit(): void {}

  ngAfterViewInit() {
    setTimeout(() => {
      this.options = {
        container: '#Radial-Tree-Graph',
        node: {
          onClick: (d) => {
            console.log(d);
          }
        }
      };
      this.chart = new RadialTree(this.data, this.options);
    }, 0);
  }
}
```

## 2. API

### 2.1 力导向图

#### 成员方法

| 方法名        | 类型                                  | 描述         |
| ------------- | ------------------------------------- | ------------ |
| `render`    | `(data: GraphData, options?) => void` | 数据更新重绘 |
| `toggleLinkVisible`    | `(type: boolean) => void`             | 是否隐藏连线关系 |
| `setZoom`  | `(size: number) => void`    | 缩放图谱     |
| `getZoom`  | `() => number`    | 获取缩放比例     |

| `downloadImg` | `() => void`                          | 下载图片     |

#### Type

```typescript
export interface IGraphData {
  nodes: Node[];
  links: Link[];
}

export interface Node {
  id: string | number; // 节点id
  label: string; // 节点文字
  typeName: string; // 类别name
  group: number; // 类别id 对应options 中 legend type
  display?: {}; // 设置指定节点样式
}

export interface Link {
  id: string | number;
  source: string | number; // 起始节点id
  target: string | number; // 终止节点id
  label: string; // 连线关系文字
  display?: {}; // 设置指定连线样式
}
```

> [更多详细使用](https://git.datagrand.com/frontend_utils/bixi-graph/blob/master/packages/graph-force/README.md)

### 2.2 股权结构图

#### 成员方法

| 方法名   | 类型                                                                                                            | 描述                         |
| -------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| `render` | `(data: GraphData, id: Number) => void`                                                                         | 初始化图渲染                 |
| `on`     | `(type: 'onScale' / 'onDataNodeMouseout' / 'onRequireData' / 'onRequireUpdate' / 'onDataLineMouseout') => void` | 鼠标事件(图放缩，数据更新等) |

> [更多详细使用](https://git.datagrand.com/frontend_utils/bixi-graph/blob/master/packages/equity-graph/README.md)

### 2.3 环形树状图图

#### 成员方法

| 方法名     | 类型                                                | 描述                                       |
| ---------- | --------------------------------------------------- | ------------------------------------------ |
| `setState` | `(options:RadialTreeOption) => RadialTree` | 设置图谱配置项                             |
| `data`     | `(data:RadialTreeData) => RadialTree`               | 传入图谱数据                               |
| `render`   | `() => void`                                        | 初始化图谱渲染                             |
| `setScale` | `(type:number) => void`                             | 图谱缩放，参数为 1 表示放大，为 0 表示缩小 |

> [更多详细使用](https://git.datagrand.com/frontend_utils/bixi-graph/blob/master/packages/radial-tree/README.md)

#### Type

```typescript
export interface RadialTreeData {
  name: string;
  children: RadialTreeData[];
}
```

[更多详细使用](https://git.datagrand.com/frontend_utils/bixi-graph/blob/master/packages/radial-tree/README.md)