mirror of
https://gitee.com/antv/g6.git
synced 2024-12-03 04:08:32 +08:00
69 lines
2.2 KiB
HTML
69 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Rect节点分组</title>
|
|
</head>
|
|
<body>
|
|
<div id="mountNode"></div>
|
|
<script src="../build/g6.js"></script>
|
|
<script>
|
|
const data = {
|
|
nodes: [
|
|
{ id: '1', x: 50, y: 50, size: 20 },
|
|
{ id: '2', x: 150, y: 50, size: 20 },
|
|
{ id: '3', x: 200, y: 50, size: 20 },
|
|
{ id: '4', x: 300, y: 130, size: 20 },
|
|
{ id: '5', x: 350, y: 50, size: 20 },
|
|
{ id: '6', x: 450, y: 50, size: 20 },
|
|
{ id: '7', x: 500, y: 50, size: 20 },
|
|
{ id: '8', x: 600, y: 50, size: 20 },
|
|
{ id: '9', x: 650, y: 50, size: 20 },
|
|
{ id: '10', x: 750, y: 50, size: 20 },
|
|
{ id: '11', x: 800, y: 50, size: 20 },
|
|
{ id: '12', x: 900, y: 150, size: 20 },
|
|
{ id: '13', x: 950, y: 50, size: 20 },
|
|
{ id: '14', x: 1050, y: 150, size: 20 },
|
|
{ id: '15', x: 1100, y: 50, size: 20 },
|
|
],
|
|
edges: [
|
|
{ source: '1', target: '2', shape: 'line', label: 'line' },
|
|
{ source: '3', target: '4', shape: 'polyline', label: 'polyline' },
|
|
{ source: '5', target: '6', shape: 'arc', label: 'arc' },
|
|
{ source: '7', target: '8', shape: 'quadratic', label: 'quadratic' },
|
|
{ source: '9', target: '10', shape: 'cubic', label: 'cubic' },
|
|
{ source: '11', target: '12', shape: 'cubic-vertical', label: 'cubic-vertical' },
|
|
{ source: '13', target: '14', shape: 'cubic-horizontal', label: 'cubic-horizontal' },
|
|
{ source: '15', target: '15', shape: 'loop', label: 'loop' },
|
|
],
|
|
};
|
|
|
|
const graph = new G6.Graph({
|
|
container: 'mountNode',
|
|
nodeStateStyles: {
|
|
selected: {
|
|
fill: 'red',
|
|
stroke: 'red',
|
|
},
|
|
},
|
|
modes: {
|
|
default: [
|
|
'drag-node',
|
|
'click-select',
|
|
'brush-select',
|
|
{
|
|
type: 'zoom-canvas',
|
|
sensitivity: 0.3,
|
|
},
|
|
],
|
|
},
|
|
width: 1500,
|
|
height: 300,
|
|
linkCenter: true, // 使边连入节点的中心
|
|
});
|
|
graph.data(data);
|
|
graph.render();
|
|
</script>
|
|
</body>
|
|
</html>
|