g6/packages/site/examples/net/forceDirected/demo/basicForce2.js
2023-02-02 10:31:36 +08:00

505 lines
7.3 KiB
JavaScript

import G6 from '@antv/g6';
const data = {
nodes: [
{
id: '0',
label: '0',
cluster: 'a',
},
{
id: '1',
label: '1',
cluster: 'a',
},
{
id: '2',
label: '2',
cluster: 'a',
},
{
id: '3',
label: '3',
cluster: 'a',
},
{
id: '4',
label: '4',
cluster: 'a',
},
{
id: '5',
label: '5',
cluster: 'a',
},
{
id: '6',
label: '6',
cluster: 'a',
},
{
id: '7',
label: '7',
cluster: 'a',
},
{
id: '8',
label: '8',
cluster: 'a',
},
{
id: '9',
label: '9',
cluster: 'a',
},
{
id: '10',
label: '10',
cluster: 'a',
},
{
id: '11',
label: '11',
cluster: 'a',
},
{
id: '12',
label: '12',
cluster: 'a',
},
{
id: '13',
label: '13',
cluster: 'b',
},
{
id: '14',
label: '14',
cluster: 'b',
},
{
id: '15',
label: '15',
cluster: 'b',
},
{
id: '16',
label: '16',
cluster: 'b',
},
{
id: '17',
label: '17',
cluster: 'b',
},
{
id: '18',
label: '18',
cluster: 'c',
},
{
id: '19',
label: '19',
cluster: 'c',
},
{
id: '20',
label: '20',
cluster: 'c',
},
{
id: '21',
label: '21',
cluster: 'c',
},
{
id: '22',
label: '22',
cluster: 'c',
},
{
id: '23',
label: '23',
cluster: 'c',
},
{
id: '24',
label: '24',
cluster: 'c',
},
{
id: '25',
label: '25',
cluster: 'c',
},
{
id: '26',
label: '26',
cluster: 'c',
},
{
id: '27',
label: '27',
cluster: 'c',
},
{
id: '28',
label: '28',
cluster: 'c',
},
{
id: '29',
label: '29',
cluster: 'c',
},
{
id: '30',
label: '30',
cluster: 'c',
},
{
id: '31',
label: '31',
cluster: 'd',
},
{
id: '32',
label: '32',
cluster: 'd',
},
{
id: '33',
label: '33',
cluster: 'd',
},
],
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: '0',
target: '10',
},
{
source: '0',
target: '11',
},
{
source: '0',
target: '13',
},
{
source: '0',
target: '14',
},
{
source: '0',
target: '15',
},
{
source: '0',
target: '16',
},
{
source: '2',
target: '3',
},
{
source: '4',
target: '5',
},
{
source: '4',
target: '6',
},
{
source: '5',
target: '6',
},
{
source: '7',
target: '13',
},
{
source: '8',
target: '14',
},
{
source: '9',
target: '10',
},
{
source: '10',
target: '22',
},
{
source: '10',
target: '14',
},
{
source: '10',
target: '12',
},
{
source: '10',
target: '24',
},
{
source: '10',
target: '21',
},
{
source: '10',
target: '20',
},
{
source: '11',
target: '24',
},
{
source: '11',
target: '22',
},
{
source: '11',
target: '14',
},
{
source: '12',
target: '13',
},
{
source: '16',
target: '17',
},
{
source: '16',
target: '18',
},
{
source: '16',
target: '21',
},
{
source: '16',
target: '22',
},
{
source: '17',
target: '18',
},
{
source: '17',
target: '20',
},
{
source: '18',
target: '19',
},
{
source: '19',
target: '20',
},
{
source: '19',
target: '33',
},
{
source: '19',
target: '22',
},
{
source: '19',
target: '23',
},
{
source: '20',
target: '21',
},
{
source: '21',
target: '22',
},
{
source: '22',
target: '24',
},
{
source: '22',
target: '25',
},
{
source: '22',
target: '26',
},
{
source: '22',
target: '23',
},
{
source: '22',
target: '28',
},
{
source: '22',
target: '30',
},
{
source: '22',
target: '31',
},
{
source: '22',
target: '32',
},
{
source: '22',
target: '33',
},
{
source: '23',
target: '28',
},
{
source: '23',
target: '27',
},
{
source: '23',
target: '29',
},
{
source: '23',
target: '30',
},
{
source: '23',
target: '31',
},
{
source: '23',
target: '33',
},
{
source: '32',
target: '33',
},
],
};
const colors = [
'#BDD2FD',
'#BDEFDB',
'#C2C8D5',
'#FBE5A2',
'#F6C3B7',
'#B6E3F5',
'#D3C6EA',
'#FFD8B8',
'#AAD8D8',
'#FFD6E7',
];
const strokes = [
'#5B8FF9',
'#5AD8A6',
'#5D7092',
'#F6BD16',
'#E8684A',
'#6DC8EC',
'#9270CA',
'#FF9D4D',
'#269A99',
'#FF99C3',
];
const nodes = data.nodes;
const clusterMap = new Map();
let clusterId = 0;
nodes.forEach(function (node) {
// cluster
if (node.cluster && clusterMap.get(node.cluster) === undefined) {
clusterMap.set(node.cluster, clusterId);
clusterId++;
}
const cid = clusterMap.get(node.cluster);
if (!node.style) {
node.style = {};
}
node.style.fill = colors[cid % colors.length];
node.style.stroke = strokes[cid % strokes.length];
});
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.Graph({
container: 'container',
width,
height,
layout: {
type: 'force2',
animate: true, // 设置为 false 可关闭布局动画
maxSpeed: 100,
linkDistance: 50,
clustering: true,
nodeClusterBy: 'cluster',
clusterNodeStrength: 300,
},
});
graph.data(data);
graph.render();
/******** 拖拽固定节点的逻辑 *********/
graph.on('node:dragstart', function (e) {
const forceLayout = graph.get('layoutController').layoutMethods[0];
forceLayout.stop()
});
graph.on('node:drag', function (e) {
refreshDragedNodePosition(e);
graph.layout()
});
function refreshDragedNodePosition(e) {
const model = e.item.get('model');
model.fx = e.x;
model.fy = e.y;
model.x = e.x;
model.y = e.y;
}
/*********************************/
if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};