mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 18:11:08 +08:00
88 lines
2.5 KiB
JavaScript
88 lines
2.5 KiB
JavaScript
import { Graph, Extensions, extend } from '@antv/g6';
|
||
import Stats from 'stats.js';
|
||
|
||
const ExtGraph = extend(Graph, {
|
||
behaviors: {
|
||
'brush-select': Extensions.BrushSelect,
|
||
},
|
||
});
|
||
|
||
const container = document.getElementById('container');
|
||
const descriptionDiv = document.createElement('div');
|
||
descriptionDiv.innerHTML = `<span style="color: #f00">正在读取大规模数据，请稍等…… Reading data...</span>`;
|
||
container.appendChild(descriptionDiv);
|
||
const width = container.scrollWidth;
|
||
const height = container.scrollHeight || 500;
|
||
|
||
const graph = new ExtGraph({
|
||
container: 'container',
|
||
width,
|
||
height,
|
||
renderer: 'webgl',
|
||
transforms: ['transform-v4-data'],
|
||
modes: {
|
||
default: [
|
||
{
|
||
type: 'zoom-canvas',
|
||
enableOptimize: false,
|
||
},
|
||
{
|
||
type: 'drag-canvas',
|
||
enableOptimize: false,
|
||
},
|
||
'drag-node',
|
||
'brush-select',
|
||
],
|
||
},
|
||
node: {
|
||
keyShape: {
|
||
r: 2,
|
||
},
|
||
},
|
||
edge: {
|
||
keyShape: {
|
||
opacity: 0.3,
|
||
},
|
||
},
|
||
});
|
||
|
||
fetch('https://gw.alipayobjects.com/os/bmw-prod/f1565312-d537-4231-adf5-81cb1cd3a0e8.json')
|
||
.then((res) => res.json())
|
||
.then((data) => {
|
||
data.edges.forEach((edge) => (edge.id = `edge-${Math.random()}`));
|
||
graph.read(data);
|
||
const nodeLen = data.nodes.length;
|
||
const edgeLen = data.edges.length;
|
||
descriptionDiv.innerHTML = `<span style="color: #f00">画布仍在分片加载中… 请等待渲染完成后再交互。Still tiled-rendering... Please do not interact with it now. </span><br/>节点数量 Nodes：${nodeLen}, 边数量 Edges：${edgeLen}, 图元数量 Shapes：${
|
||
nodeLen + edgeLen
|
||
}`;
|
||
graph.on('afterrender', (e) => {
|
||
descriptionDiv.innerHTML = `<span style="color: #6c6">🎉渲染完成，可以交互啦！Done~ Feel free to interact! </span><br/>节点数量：${nodeLen}, 边数量：${edgeLen}, 图元数量：${
|
||
nodeLen + edgeLen
|
||
}`;
|
||
});
|
||
});
|
||
|
||
if (typeof window !== 'undefined')
|
||
window.onresize = () => {
|
||
if (!graph || graph.destroyed) return;
|
||
if (!container || !container.scrollWidth || !container.scrollHeight) return;
|
||
graph.setSize([container.scrollWidth, container.scrollHeight]);
|
||
};
|
||
|
||
// stats
|
||
const stats = new Stats();
|
||
stats.showPanel(0);
|
||
const $stats = stats.dom;
|
||
$stats.style.position = 'absolute';
|
||
$stats.style.left = '0px';
|
||
$stats.style.top = '50px';
|
||
container.appendChild($stats);
|
||
const update = () => {
|
||
if (stats) {
|
||
stats.update();
|
||
}
|
||
requestAnimationFrame(update);
|
||
};
|
||
update();
|