antv x6中使用new Graph的时候传递数据
时间: 2023-11-28 17:48:08 浏览: 37
在 antv X6 中使用 `new Graph` 时,可以通过传递一个对象来初始化图形。这个对象可以包含以下属性:
- `width`:图形的宽度
- `height`:图形的高度
- `grid`:网格配置
- `background`:背景配置
- `snapline`:对齐线配置
- `history`:历史记录配置
- `clipboard`:剪贴板配置
- `keyboard`:键盘快捷键配置
- `resizing`:调整大小配置
- `resizing.direction`:调整大小的方向
- `resizing.minSize`:调整大小的最小尺寸
- `embedding`:嵌入配置
- `validateEmbedding`:嵌入验证函数
- `validateConnection`:连接验证函数
- `highlighting`:高亮配置
以下是一个示例:
```javascript
import { Graph } from '@antv/x6';
const graph = new Graph({
container: document.getElementById('graph-container'),
width: 800,
height: 600,
grid: true,
background: {
color: '#f5f5f5',
},
snapline: true,
history: true,
clipboard: true,
keyboard: true,
resizing: {
direction: ['top', 'right', 'bottom', 'left', 'topRight', 'bottomRight', 'bottomLeft', 'topLeft'],
minSize: { width: 50, height: 50 },
},
embedding: {
enabled: true,
validateMagnet: (cell, magnet) => {
if (magnet.getAttribute('port-group') === 'in') {
return true;
}
return false;
},
},
validateEmbedding: (child, parent) => {
if (parent && parent.shape === 'group') {
return parent.getBBox().containsRect(child.getBBox());
}
return true;
},
validateConnection: (sourceView, sourceMagnet, targetView, targetMagnet) => {
if (!sourceMagnet || !targetMagnet) {
return false;
}
if (sourceMagnet.getAttribute('port-group') !== targetMagnet.getAttribute('port-group')) {
return true;
}
return false;
},
highlighting: {
magnetAvailable: {
name: 'stroke',
args: {
padding: 4,
attrs: {
strokeWidth: 3,
stroke: '#1e90ff',
},
},
},
magnetAdsorbed: {
name: 'stroke',
args: {
padding: 4,
attrs: {
strokeWidth: 3,
stroke: '#1e90ff',
},
},
},
},
});
```
其中,`container` 属性是必须的,表示图形的容器。其他属性都是可选的。你可以根据需要选择需要的配置项。