mirror of
https://gitee.com/antv/g6.git
synced 2024-12-02 19:58:46 +08:00
95 lines
2.0 KiB
HTML
95 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Arc Edge</title>
|
|
<style>
|
|
.g6-tooltip{
|
|
border: 1px solid #e2e2e2;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
color: #545454;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
padding: 10px 8px;
|
|
box-shadow: rgb(174, 174, 174) 0px 0px 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="mountNode"></div>
|
|
<script src="../build/g6.js"></script>
|
|
<script src="../build/minimap.js"></script>
|
|
<script src="./assets/d3-4.13.0.min.js"></script>
|
|
<script src="./assets/jquery-3.2.1.min.js"></script>
|
|
<script>
|
|
const data = {
|
|
nodes: [{
|
|
id: 'node5',
|
|
x: 100,
|
|
y: 180,
|
|
label: '5',
|
|
size: 80
|
|
},
|
|
{
|
|
id: 'node6',
|
|
x: 400,
|
|
y: 150,
|
|
label: '6',
|
|
size: 50
|
|
},
|
|
{
|
|
id: 'node7',
|
|
x: 600,
|
|
y: 450,
|
|
label: '7',
|
|
size: 200
|
|
}],
|
|
edges: [{
|
|
source: 'node6',
|
|
target: 'node5',
|
|
shape: 'arc',
|
|
curveOffset: -150
|
|
},
|
|
{
|
|
source: 'node6',
|
|
target: 'node5',
|
|
shape: 'arc',
|
|
curveOffset: 50
|
|
},
|
|
{
|
|
source: 'node5',
|
|
target: 'node6',
|
|
shape: 'arc',
|
|
curveOffset: 50
|
|
},
|
|
{
|
|
source: 'node5',
|
|
target: 'node7',
|
|
shape: 'arc',
|
|
controlPoints: [{
|
|
x: 200,
|
|
y: 315
|
|
}]
|
|
}]
|
|
};
|
|
const graph = new G6.Graph({
|
|
container: 'mountNode',
|
|
width: 1000,
|
|
height: 600,
|
|
linkCenter: true,
|
|
modes: {
|
|
default: ['drag-canvas']
|
|
},
|
|
defaultEdge: {
|
|
shape: 'arc',
|
|
style: {
|
|
lineWidth: 1,
|
|
stroke: '#aaa'
|
|
}
|
|
}
|
|
});
|
|
graph.data(data);
|
|
graph.render();</script>
|
|
</body>
|
|
</html> |