g6/demos/layout-force-drag-fix.html

174 lines
3.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 data = {
"nodes": [{
"id": "0",
"label": "0"
},
{
"id": "1",
"label": "1"
},
{
"id": "2",
"label": "2"
},
{
"id": "3",
"label": "3"
},
{
"id": "4",
"label": "4"
},
{
"id": "5",
"label": "5"
},
{
"id": "6",
"label": "6"
},
{
"id": "7",
"label": "7"
},
{
"id": "8",
"label": "8"
},
{
"id": "9",
"label": "9"
}],
"edges": [{
"source": "0",
"target": "1"
},
{
"source": "0",
"target": "2"
},
{
"source": "0",
"target": "3"
},
{
"source": "0",
"target": "4"
},
{
"source": "0",
"target": "5"
},
{
"source": "0",
"target": "7"
},
{
"source": "0",
"target": "8"
},
{
"source": "0",
"target": "9"
},
{
"source": "2",
"target": "3"
},
{
"source": "4",
"target": "5"
},
{
"source": "4",
"target": "6"
},
{
"source": "5",
"target": "6"
}]
};
const nodes = data.nodes;
nodes.forEach((node, i) => {
if (i <= 16 && i !== 12) {
if (!node.style) {
node.style = {
fill: 'lightsteelblue'
}
} else {
node.style.fill = 'lightsteelblue';
}
}
});
const graph = new G6.Graph({
container: 'mountNode',
width: 1000,
height: 600,
layout: {
type: 'force',
preventOverlap: true,
nodeSize: 20
},
modes: {
default: ['drag-node']
},
defaultNode: {
size: [20, 20],
color: 'steelblue'
},
defaultEdge: {
size: 1,
color: '#e2e2e2'
},
nodeStyle: {
default: {
lineWidth: 2,
fill: '#fff'
},
selected: {
fill: 'steelblue'
}
},
edgeStyle: {
default: {
endArrow: {
path: 'M 4,0 L -4,-4 L -4,4 Z',
d: 4
}
}
}
});
graph.data(data);
graph.render();
function refreshDragedNodePosition(e) {
const model = e.item.get('model');
model.fx = e.x;
model.fy = e.y;
}
graph.on('node:dragstart', e => {
graph.layout();
refreshDragedNodePosition(e);
});
graph.on('node:drag', e => {
refreshDragedNodePosition(e);
});
</script>
</body>
</html>