2023-08-29 21:58:37 +08:00
|
|
|
import { Graph, Extensions, extend } from '@antv/g6';
|
2023-08-31 14:46:30 +08:00
|
|
|
import Stats from 'stats.js';
|
2023-08-29 21:58:37 +08:00
|
|
|
|
2023-10-31 22:14:20 +08:00
|
|
|
const dataFormat = (dataAUR, options = {}, graphCore) => {
|
|
|
|
const { dataAdded, dataUpdated, dataRemoved } = dataAUR;
|
|
|
|
return {
|
|
|
|
dataAdded: dataFormatHandler(dataAdded, options, graphCore),
|
|
|
|
dataUpdated: dataFormatHandler(dataUpdated, options, graphCore),
|
|
|
|
dataRemoved,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const dataFormatHandler = (data, options = {}, graphCore) => {
|
|
|
|
if (!data.nodes || !data.edges) return {};
|
2023-08-29 21:58:37 +08:00
|
|
|
const map = new Map();
|
|
|
|
const nodes: any = [];
|
|
|
|
data.nodes.forEach((node) => {
|
|
|
|
if (map.has(node.id)) return;
|
|
|
|
nodes.push(node);
|
|
|
|
map.set(node.id, true);
|
|
|
|
});
|
|
|
|
data.edges.forEach((edge) => {
|
|
|
|
const sourceDegree = map.get(edge.source) || 0;
|
|
|
|
map.set(edge.source, sourceDegree + 1);
|
|
|
|
const targetDegree = map.get(edge.target) || 0;
|
|
|
|
map.set(edge.target, targetDegree + 1);
|
|
|
|
});
|
|
|
|
return {
|
|
|
|
nodes: nodes.map((node) => {
|
|
|
|
const { id, x, y, olabel } = node;
|
|
|
|
return {
|
|
|
|
id,
|
|
|
|
data: {
|
|
|
|
x,
|
|
|
|
y,
|
|
|
|
label: olabel,
|
|
|
|
degree: map.get(id),
|
|
|
|
},
|
|
|
|
};
|
|
|
|
}),
|
|
|
|
edges: data.edges.map((edge) => ({
|
|
|
|
id: `edge-${Math.random()}`,
|
|
|
|
source: edge.source,
|
|
|
|
target: edge.target,
|
|
|
|
})),
|
|
|
|
};
|
|
|
|
};
|
2023-10-31 22:14:20 +08:00
|
|
|
|
2023-08-29 21:58:37 +08:00
|
|
|
const ExtGraph = extend(Graph, {
|
|
|
|
transforms: {
|
|
|
|
'data-format': dataFormat,
|
|
|
|
},
|
|
|
|
behaviors: {
|
|
|
|
'brush-select': Extensions.BrushSelect,
|
|
|
|
'activate-relations': Extensions.ActivateRelations,
|
|
|
|
},
|
|
|
|
});
|
2023-08-28 11:35:11 +08:00
|
|
|
|
|
|
|
const container = document.getElementById('container') as HTMLElement;
|
|
|
|
const descriptionDiv = document.createElement('div');
|
|
|
|
descriptionDiv.innerHTML = `正在渲染大规模数据,请稍等……`;
|
|
|
|
container.appendChild(descriptionDiv);
|
|
|
|
|
|
|
|
const width = container.scrollWidth;
|
|
|
|
const height = container.scrollHeight || 500;
|
2023-08-29 21:58:37 +08:00
|
|
|
const graph = new ExtGraph({
|
2023-08-28 11:35:11 +08:00
|
|
|
container: 'container',
|
|
|
|
width,
|
|
|
|
height,
|
2023-08-31 18:16:13 +08:00
|
|
|
transforms: [
|
2023-08-29 21:58:37 +08:00
|
|
|
'data-format',
|
|
|
|
{
|
|
|
|
type: 'map-node-size',
|
|
|
|
field: 'degree',
|
|
|
|
range: [2, 24],
|
|
|
|
},
|
|
|
|
],
|
2023-08-28 11:35:11 +08:00
|
|
|
modes: {
|
2023-08-31 18:16:13 +08:00
|
|
|
default: [
|
|
|
|
'brush-select',
|
|
|
|
{
|
|
|
|
type: 'zoom-canvas',
|
|
|
|
enableOptimize: true,
|
|
|
|
},
|
|
|
|
{ type: 'drag-canvas', enableOptimize: true },
|
|
|
|
'activate-relations',
|
|
|
|
'drag-node',
|
|
|
|
],
|
2023-08-28 11:35:11 +08:00
|
|
|
},
|
2023-08-29 21:58:37 +08:00
|
|
|
node: (model) => {
|
|
|
|
const { id, data } = model;
|
|
|
|
const { degree, label } = data;
|
|
|
|
let labelLod;
|
|
|
|
if (degree > 30) labelLod = -2;
|
|
|
|
else if (degree > 20) labelLod = -1;
|
|
|
|
else if (degree > 15) labelLod = 0;
|
|
|
|
else if (degree > 10) labelLod = 1;
|
|
|
|
else if (degree > 6) labelLod = 2;
|
|
|
|
else if (degree > 3) labelLod = 3;
|
|
|
|
const config = {
|
|
|
|
id,
|
|
|
|
data: {
|
|
|
|
...data,
|
|
|
|
animates: {
|
|
|
|
hide: [
|
|
|
|
{
|
|
|
|
fields: ['opacity'],
|
|
|
|
duration: 200,
|
|
|
|
shapeId: 'labelShape',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
update: [
|
|
|
|
{
|
|
|
|
fields: ['lineWidth'],
|
|
|
|
shapeId: 'keyShape',
|
|
|
|
duration: 100,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
fields: ['opacity'],
|
|
|
|
shapeId: 'haloShape',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
if (labelLod !== undefined) {
|
|
|
|
config.data.labelShape = {
|
|
|
|
text: label,
|
|
|
|
opacity: 0.8,
|
|
|
|
maxWidth: '250%',
|
|
|
|
lod: labelLod,
|
|
|
|
};
|
|
|
|
config.data.labelBackgroundShape = {
|
|
|
|
lod: labelLod,
|
|
|
|
};
|
2023-10-31 22:14:20 +08:00
|
|
|
config.data.lodLevels = [
|
|
|
|
{ zoomRange: [0, 1] }, // -2
|
|
|
|
{ zoomRange: [1, 1.2] }, // -1
|
|
|
|
{ zoomRange: [1.2, 0.4], primary: true }, // 0
|
|
|
|
{ zoomRange: [1.4, 1.6] }, // 1
|
|
|
|
{ zoomRange: [1.6, 1.8] }, // 2
|
|
|
|
{ zoomRange: [1.8, 2.5] }, // 3
|
|
|
|
{ zoomRange: [2.5, Infinity] }, // 4
|
|
|
|
];
|
2023-08-29 21:58:37 +08:00
|
|
|
}
|
|
|
|
return config;
|
|
|
|
},
|
|
|
|
edge: {
|
2023-08-28 11:35:11 +08:00
|
|
|
keyShape: {
|
2023-08-29 21:58:37 +08:00
|
|
|
lineWidth: 0.3,
|
|
|
|
opacity: 0.5,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
nodeState: {
|
|
|
|
selected: {
|
|
|
|
keyShape: {
|
|
|
|
lineWidth: 1,
|
|
|
|
},
|
|
|
|
haloShape: {
|
|
|
|
lineWidth: 4,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
edgeState: {
|
|
|
|
selected: {
|
|
|
|
keyShape: {
|
|
|
|
lineWidth: 2,
|
|
|
|
},
|
|
|
|
haloShape: {
|
|
|
|
lineWidth: 4,
|
|
|
|
},
|
2023-08-28 11:35:11 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
fetch('https://gw.alipayobjects.com/os/basement_prod/0b9730ff-0850-46ff-84d0-1d4afecd43e6.json')
|
|
|
|
.then((res) => res.json())
|
|
|
|
.then((res) => {
|
2023-08-29 21:58:37 +08:00
|
|
|
graph.read(res);
|
2023-08-28 11:35:11 +08:00
|
|
|
|
|
|
|
const nodeLen = graph.getAllNodesData().length;
|
|
|
|
const edgeLen = graph.getAllEdgesData().length;
|
2023-08-29 21:58:37 +08:00
|
|
|
descriptionDiv.innerHTML = `节点数量:${nodeLen}, 边数量:${edgeLen}, 图元数量:${nodeLen * 3 + edgeLen}`;
|
2023-08-28 11:35:11 +08:00
|
|
|
});
|
2023-08-31 14:46:30 +08:00
|
|
|
|
|
|
|
// stats
|
|
|
|
const stats = new Stats();
|
|
|
|
stats.showPanel(0);
|
|
|
|
const $stats = stats.dom;
|
|
|
|
$stats.style.position = 'absolute';
|
|
|
|
$stats.style.left = '0px';
|
|
|
|
$stats.style.top = '0px';
|
|
|
|
container.appendChild($stats);
|
|
|
|
const update = () => {
|
|
|
|
if (stats) {
|
|
|
|
stats.update();
|
|
|
|
}
|
|
|
|
requestAnimationFrame(update);
|
|
|
|
};
|
|
|
|
update();
|