https://github.com/antvis/vis-predict-engine
可视化预测引擎，目前只用于预测图可视化布局.布局预测的模型由本引擎内置，支持force/radial/concentric/circular的四布局分类
https://github.com/antvis/vis-predict-engine
Last synced: over 1 year ago
JSON representation
可视化预测引擎，目前只用于预测图可视化布局.布局预测的模型由本引擎内置，支持force/radial/concentric/circular的四布局分类
- Host: GitHub
- URL: https://github.com/antvis/vis-predict-engine
- Owner: antvis
- Created: 2020-11-13T03:03:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-01T07:43:23.000Z (about 5 years ago)
- Last Synced: 2025-04-13T06:15:51.673Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 18.6 KB
- Stars: 15
- Watchers: 22
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @antv/vis-predict-engine 可视化预测引擎
## 图布局预测
目前布局预测的模型由本引擎内置，支持force/radial/concentric/circular的四布局分类，后续将支持更多布局分类。
### 使用方法
```
import { GraphLayoutPredict } from '@antv/vis-predict-engine';
const { predictLayout, confidence } = await GraphLayoutPredict.predict(data, expectLayout, showLog);
```
**入参**：
- **data**: 图数据（格式见使用示例），必传;
- **expectLayout**: 期望布局('force' | 'radial' | 'concentric' | 'circular' )，如无期望布局可传undefined;
- **showLog**: 是否需要是输出日志（布尔）, 传false或不传则不输出日志；
**返回**：
- **predictLayout**: 预测布局, string;
- **confidence**: 置信度，number。
### 使用示例
```
import G6 from "@antv/g6";
import { GraphLayoutPredict } from "@antv/vis-predict-engine";
const data = {
nodes: [
{
id: "node-0",
label: "0"
},
{
id: "node-1",
label: "1"
},
{
id: "node-2",
label: "2"
},
{
id: "node-3",
label: "3"
},
{
id: "node-4",
label: "4"
},
{
id: "node-5",
label: "5"
},
{
id: "node-6",
label: "6"
},
{
id: "node-7",
label: "7"
},
{
id: "node-8",
label: "8"
},
{
id: "node-9",
label: "9"
}
],
edges: [
{
id: "edge-0",
source: "node-0",
target: "node-1"
},
{
id: "edge-1",
source: "node-0",
target: "node-2"
},
{
id: "edge-2",
source: "node-0",
target: "node-3"
},
{
id: "edge-4",
source: "node-0",
target: "node-4"
},
{
id: "edge-5",
source: "node-0",
target: "node-5"
},
{
id: "edge-6",
source: "node-1",
target: "node-6"
},
{
id: "edge-7",
source: "node-6",
target: "node-7"
},
{
id: "edge-8",
source: "node-5",
target: "node-7"
},
{
id: "edge-9",
source: "node-1",
target: "node-4"
},
{
id: "edge-10",
source: "node-4",
target: "node-5"
},
{
id: "edge-11",
source: "node-3",
target: "node-7"
},
{
id: "edge-12",
source: "node-2",
target: "node-5"
},
{
id: "edge-13",
source: "node-2",
target: "node-1"
}
]
};
async function layoutPredict() {
return await GraphLayoutPredict.predict(data);
}
(async function () {
// predictLayout 表示预测的布局：force | radial | concentric | circular
// confidence 表示预测的可信度
const { predictLayout, confidence } = await layoutPredict();
const container = document.getElementById("root");
const graph = new G6.Graph({
container,
width: container.scrollWidth,
height: container.scrollHeight || 500,
layout: {
type: predictLayout,
nodeSize: 50,
preventOverlap: true
},
modes: {
default: ["drag-canvas", "zoom-canvas", "drag-node"]
}
});
graph.data(data);
graph.render();
graph.on("afterlayout", () => {
graph.fitView();
});
if (typeof window !== "undefined") {
window.onresize = () => {
if (!graph || graph.get("destroyed")) return;
if (!container || !container.scrollWidth || !container.scrollHeight)
return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
}
})();
```