75 lines
1.6 KiB
HTML
75 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>关系图</title>
|
|
<!-- 第一步：引入G6 -->
|
|
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- 第二步：创建DOM容器 -->
|
|
<div id="c1"></div>
|
|
<script>
|
|
|
|
// 第三步：设置数据
|
|
var data = {
|
|
"nodes": [
|
|
{
|
|
"shape": "customNode",
|
|
"id": "d62d1569"
|
|
},
|
|
{
|
|
"x": 140,
|
|
"y": 210,
|
|
"id": "node1"
|
|
},
|
|
{
|
|
"x": 270,
|
|
"y": 210,
|
|
"id": "node2"
|
|
}
|
|
],
|
|
"edges": [
|
|
{
|
|
"source": "node1",
|
|
"id": "edge1",
|
|
"target": "node2"
|
|
}
|
|
]
|
|
};
|
|
|
|
G6.registNode('customNode', {
|
|
draw: function(cfg, group){
|
|
group.addShape('text', {
|
|
attrs: {
|
|
x: 100,
|
|
y: 100,
|
|
fill: '#333',
|
|
text: '我是一个自定义节点，\n有下面那个方形和我自己组成'
|
|
}
|
|
});
|
|
return group.addShape('rect', {
|
|
attrs: {
|
|
x: 100,
|
|
y: 100,
|
|
width: 100,
|
|
height: 100,
|
|
stroke: 'red'
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// 第四步：配置G6画布
|
|
var net = new G6.Net({
|
|
id: 'c1', // 容器ID
|
|
width: 500, // 画布宽
|
|
height: 500 // 画布高
|
|
});
|
|
// 第五步：载入数据
|
|
net.source(data.nodes, data.edges);
|
|
// 第六步：渲染关系图
|
|
net.render();
|
|
</script>
|
|
</body>
|
|
</html> |