g6/packages/site/examples/performance/perf/demo/eva.ts

201 lines
4.7 KiB
TypeScript
Raw Normal View History

2023-08-29 21:58:37 +08:00
import { Graph, Extensions, extend } from '@antv/g6';
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
});
// 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();