g6/demos/custom-multi-edges.html

78 lines
1.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点之间连多条线</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
defaultNode: {
size: [40, 40]
},
defaultEdge: {
shape: 'quadratic'
},
modes: {
default: [ 'drag-node', 'drag-canvas' ]
}
});
const data = {
nodes: [
{
id: 'node1',
label: 'node1',
x: 500,
y: 200,
anchorPoints: [[0, 1], [0.5, 1]],
shape: 'rect'
},
{
id: 'node2',
label: 'node2',
x: 300,
y: 400,
anchorPoints: [[0.5, 0], [1, 1]],
shape: 'rect'
}
],
edges: [
{
source: 'node1',
target: 'node2',
sourceAnchor: 0,
targetAnchor: 0,
style: {
endArrow: true
}
},
{
source: 'node2',
target: 'node1',
sourceAnchor: 1,
targetAnchor: 1,
style: {
endArrow: true
}
}
]
}
graph.data(data)
graph.render()
graph.getNodes().forEach(node => {
const anchor = node.getAnchorPoints()
console.log(anchor)
})
</script>
</body>
</html>