@kgdata/forcegraph/src/ForceGraph/index.md

forcegraph

---
mobile: false
nav:
  title: forcegraph
  path: /forcegraph
---

## ForceGraph

普通实践:

```tsx
import React from 'react';
import ForceGraph from '@kgdata/forcegraph';
const graphData = {
  nodes: [
    { id: 'node0', size: 50, label: 'node0' },
    { id: 'node1', size: 30, label: 'node1' },
    { id: 'node2', size: 30, label: 'node2' },
    { id: 'node3', size: 30, label: 'node3' },
  ],
  edges: [
    { source: 'node0', target: 'node1', label: '我是连线' },

    { source: 'node0', target: 'node2' },
    { source: 'node0', target: 'node3' },
    // { source: 'node0', target: 'node17' },
  ],
};

export default () => {
  return (
    <div style={{ height: 600 }}>
      <ForceGraph {...{ graphData }} />
    </div>
  );
};
```

添加关系:

```tsx
import React, { useState } from 'react';
import ForceGraph from '@kgdata/forcegraph';
function getData(num: number, name: string, start: string) {
  let data: any = {
    nodes: [],
    edges: [],
  };
  for (let i = 0; i < num; i++) {
    data.nodes.push({
      id: `${name}${i}`,
      size: 20,
      label: `${name}${i}`,
    });
    if (i > 0) {
      data.edges.push({ source: `${start}`, target: `${name}${i}` });
    }
  }
  return data;
}
const App = () => {
  const [graphData, setGraphData] = useState(getData(100, 'node', 'node0'));

  const onNodeClick = async (e: any, Graph: any) => {
    let addGraphData = getData(100, 'newnode', e.item._cfg.id);
    let newGraphData = Object.assign(graphData, {});
    newGraphData.edges.some((item: any) => {
      if (item.target === e.item._cfg.id) {
        item.linkHeight = 300;
        return true;
      }
    });
    setGraphData({
      nodes: [...newGraphData.nodes, ...addGraphData.nodes],
      edges: [...newGraphData.edges, ...addGraphData.edges],
    });
  };

  return (
    <div style={{ height: 600 }}>
      <ForceGraph {...{ graphData, onNodeClick }} />{' '}
    </div>
  );
};

export default App;
```

request:

```tsx
import React, { useState } from 'react';
import ForceGraph from '@kgdata/forcegraph';
function getData(num: number, name: string, start: string) {
  let data: any = {
    nodes: [],
    edges: [],
  };
  for (let i = 0; i < num; i++) {
    data.nodes.push({
      id: `${name}${i}`,
      size: 20,
      label: `${name}${i}`,
    });
    if (i > 0) {
      data.edges.push({ source: `${start}`, target: `${name}${i}` });
    }
  }
  return data;
}
const App = () => {
  const [graphData, setGraphData] = useState(getData(100, 'node', 'node0'));

  const onNodeClick = async (e: any, Graph: any) => {};

  const myQuery = async () => {
    return {
      data: graphData,
    };
  };
  const request = async (params) => {
    const msg = await myQuery(params);
    return {
      data: msg.data,
    };
  };
  return (
    <div style={{ height: 600 }}>
      <ForceGraph {...{ params: { nodeId: '1' }, request, onNodeClick }} />{' '}
    </div>
  );
};

export default App;
```

### 需要传入 props

| 名称        | 是否必传 | 类型     | 备注                                |
| ----------- | -------- | -------- | ----------------------------------- |
| `graphData` | `false`  | `String` | 力导向图的数据源                    |
| `graphCfg`  | `false`  | `Object` | 力导向图的配置项                    |
| `params`    | `false`  | `Object` | 配合`request`                       |
| `request`   | `false`  | `Fn`     | 需要返回`promise`结果，力导向图数据 |
| `postData`  | `false`  | `Fn`     | 处理`requset`返回的 data 结果       |
| `on...`     | `false`  | `Fn`     | 力导向图事件                        |

注意：该力导向图数据来源 `graphData`和`request`选择其中一个进行使用,同时使用`request`优先级高

#### `graphData`(必传)

该力导向图的数据源。例如:`{nodes:[],edges:[]}`

    #####  `graphData.nodes`

`nodes`节点信息 例如:`[{id:'node0',label:'我是第一个节点'}]`

|    名称    | 是否必传 |   类型   |       备注       |
| :--------: | :------: | :------: | :--------------: |
|    `id`    |  `true`  | `String` | 该节点的唯一 id  |
|  `label`   | `false`  | `String` |   该节点的名称   |
|   `size`   | `false`  | `Number` |    该节点大小    |
|  `style`   | `false`  | `object` | 该节点的样式属性 |
| `labelCfg` | `false`  | `object` |   名称文本配置   |

##### `nodes.style`

`style`配置项

|   名称   | 是否必传 |   类型   |       备注       |
| :------: | :------: | :------: | :--------------: |
|  `fill`  | `false`  | `String` | 该节点的填充颜色 |
| `stroke` | `false`  | `String` |  该节点描边颜色  |

##### `nodes.labelCfg`

|  名称   | 是否必传 |   类型   |      备注      |
| :-----: | :------: | :------: | :------------: |
| `style` | `false`  | `Object` | 该文本样式属性 |

##### `nodes.lebelCfg.style`

|    名称    | 是否必传 |   类型   |   备注   |
| :--------: | :------: | :------: | :------: |
|   `fill`   | `false`  | `String` | 文本颜色 |
| `fontSize` | `false`  | `Number` | 文本大小 |

##### `graphData.edges`

​ `edges` : 节点关系(连线) 例如:`[{ source: 'node0', target: 'node1',label:'我的连线'}]`

|    名称    | 是否必传 |   类型   |      备注      |
| :--------: | :------: | :------: | :------------: |
|  `source`  |  `true`  | `String` |    来源 id     |
|  `target`  |  `true`  | `String` |    结束 id     |
|  `label`   | `false`  | `String` |    连线名称    |
|  `style`   | `false`  | `Object` | 该边的样式属性 |
| `labelCfg` | `false`  | `Object` |  名称文本配置  |

##### `edges.style`

|    名称     | 是否必传 |   类型   |    备注    |
| :---------: | :------: | :------: | :--------: |
|  `stroke`   | `false`  | `String` |  该边颜色  |
| `lineWidth` | `false`  | `Number` | 该边的宽度 |

##### `edges.labelCfg`

|    名称    | 是否必传 |   类型   |   备注   |
| :--------: | :------: | :------: | :------: |
|   `fill`   | `false`  | `String` | 文本颜色 |
| `fontSize` | `false`  | `Number` | 文本大小 |

#### `graphCfg`

该力导向图的配置。例如：`{ width: 600,height: 600,defaultNode:{label:'默认名称'},defaultEdge:{label:'默认名称'}}`

|     名称      | 是否必传 |   类型   |                         备注                          |
| :-----------: | :------: | :------: | :---------------------------------------------------: |
|    `width`    |  `true`  | `Number` |                    该力导向图宽度                     |
|   `height`    |  `true`  | `Number` |                    该力导向图高度                     |
| `defaultNode` | `false`  | `Object` | 默认节点配置(这是全局配置，同上方 nodes 单个配置相同) |
| `defaultEdge` | `false`  | `Object` |  默认边配置(这是全局配置，同上方 edges 单个配置相同)  |
|   `layout`    | `false`  | `Object` |                     力导向图布局                      |

##### `graphCfg.layout`

| 名称           | 是否必传 | 类型          | 备注                         |
| -------------- | -------- | ------------- | ---------------------------- |
| `linkDistance` | `false`  | `Number`/`Fn` | 该力导向图边的长度           |
| `center`       | `false`  | `Number[]`    | 该力导向图的中心（[ 0, 0 ]） |

#### requset

最佳

#### 事件

| 事件             | 描述               | 回调参数     |
| ---------------- | ------------------ | ------------ |
| `onNodeClick`    | 节点`node`单击事件 | `e`，`Graph` |
| `onNodeDblClick` | 节点`node`双击事件 | `e`,`Graph`  |

回调参数

| 参数    | 描述                                         |
| ------- | -------------------------------------------- |
| `e`     | 默认事件参数，`e.item`为触发元素             |
| `Graph` | 该力导向图实例 可操作一些元素的添加,删除修改 |