mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 18:11:08 +08:00
88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
|
import G6 from '@antv/g6';
|
||
|
|
|
||
|
|
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: 'grid',
|
||
|
|
width: 400,
|
||
|
|
height: 400,
|
||
|
|
},
|
||
|
|
autoFit: 'center',
|
||
|
|
node: {
|
||
|
|
keyShape: {
|
||
|
|
r: 10,
|
||
|
|
},
|
||
|
|
labelShape: {
|
||
|
|
text: {
|
||
|
|
fields: ['id'],
|
||
|
|
formatter: (model) => model.id,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
combo: {
|
||
|
|
labelShape: {
|
||
|
|
text: {
|
||
|
|
fields: ['id'],
|
||
|
|
formatter: (model) => model.id,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
animates: {
|
||
|
|
// collapse and expand are kinds of update, so response these update with the following animations
|
||
|
|
update: [
|
||
|
|
{
|
||
|
|
fields: ['lineWidth', 'r'],
|
||
|
|
shapeId: 'keyShape',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
fields: ['opacity'],
|
||
|
|
shapeId: 'haloShape',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
modes: {
|
||
|
|
default: ['drag-combo', 'click-select', 'drag-node', 'drag-canvas', 'zoom-canvas', 'collapse-expand-combo'],
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
nodes: [
|
||
|
|
{ id: 'node1', data: { parentId: 'combo1' } },
|
||
|
|
{ id: 'node2', data: { parentId: 'combo1' } },
|
||
|
|
{ id: 'node3', data: { parentId: 'combo2' } },
|
||
|
|
{ id: 'node4', data: { parentId: 'combo1' } },
|
||
|
|
{ id: 'node5', data: {} },
|
||
|
|
],
|
||
|
|
edges: [
|
||
|
|
{ id: 'edge1', source: 'node1', target: 'node2', data: {} },
|
||
|
|
{ id: 'edge2', source: 'node1', target: 'node3', data: {} },
|
||
|
|
{ id: 'edge3', source: 'node1', target: 'node4', data: {} },
|
||
|
|
{ id: 'edge4', source: 'node2', target: 'node3', data: {} },
|
||
|
|
{ id: 'edge5', source: 'node3', target: 'node4', data: {} },
|
||
|
|
{ id: 'edge6', source: 'node4', target: 'node5', data: {} },
|
||
|
|
],
|
||
|
|
combos: [
|
||
|
|
{ id: 'combo1', data: { parentId: 'combo2' } },
|
||
|
|
{ id: 'combo2', data: {} },
|
||
|
|
{ id: 'combo3', data: {} },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const btnContainer = document.createElement('div');
|
||
|
|
btnContainer.style.position = 'absolute';
|
||
|
|
container.appendChild(btnContainer);
|
||
|
|
const tip = document.createElement('span');
|
||
|
|
tip.innerHTML = '👉 Double Click a Combo to Collapse/Expand';
|
||
|
|
btnContainer.appendChild(tip);
|
||
|
|
|
||
|
|
if (typeof window !== 'undefined')
|
||
|
|
window.onresize = () => {
|
||
|
|
if (!graph || graph.destroyed) return;
|
||
|
|
if (!container || !container.scrollWidth || !container.scrollHeight) return;
|
||
|
|
graph.setSize([container.scrollWidth, container.scrollHeight]);
|
||
|
|
};
|