mirror of
https://gitee.com/antv/g6.git
synced 2024-12-14 01:21:33 +08:00
a0c131b0a7
* refactor(runtime): merge into getChildrenData, getComboData, add get getAncestorsData * refactor(runtime): move translate logic from graph to data controller * feat(utils): add positionOf util * refactor(runtime): adjust the order of drawing combos * refactor(elements): sync combo position to model, adjust combo size calc * refactor(utils): dfs provide depth info * refactor(elements): combo sync position and zIndex * feat(utils): add zIndexOf util * refactor(runtime): refactor data/element controller to fit combo update * test: assign graph into window.graph * refactor(elements): combo use childrenData to get marker text * refactor(elements): filter zIndex from graphicStyle * feat(utils): add getSubgraphRelatedEdges util * refactor(animation): add combo-collapse-expand animation * refactor(runtime): add combo collapse and expand flow * fix: fix issue in data controller and base-combo * test: update test case and snapshots * feat(behaviors): support click collapse-expand, drag-combo * refactor: merge drag node and drag combo into drag element * fix(behaviors): fix issue drag element between combo wont update * test(behaviors): add drag-element test case and snapshots * test: fix snapshot * test: update test case and snapshots * fix: fix format and types * chore: adjust drag-node to drag element
40 lines
1012 B
TypeScript
40 lines
1012 B
TypeScript
import { Graph } from '@antv/g6';
|
|
|
|
const container = document.getElementById('container');
|
|
const descriptionDiv = document.createElement('div');
|
|
descriptionDiv.innerHTML = 'Doing layout... web-worker is enabled in this demo, so the layout will not block the page.';
|
|
container.appendChild(descriptionDiv);
|
|
|
|
fetch('https://gw.alipayobjects.com/os/basement_prod/7bacd7d1-4119-4ac1-8be3-4c4b9bcbc25f.json')
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
const graph = new Graph({
|
|
container: 'container',
|
|
data,
|
|
layout: {
|
|
type: 'fruchterman',
|
|
speed: 20,
|
|
gravity: 1,
|
|
maxIteration: 10000,
|
|
workerEnabled: true,
|
|
},
|
|
node: {
|
|
style: {
|
|
size: 6,
|
|
},
|
|
},
|
|
edge: {
|
|
style: {
|
|
stroke: '#ddd',
|
|
},
|
|
},
|
|
behaviors: ['drag-canvas', 'drag-element'],
|
|
});
|
|
|
|
graph.render();
|
|
|
|
graph.on('afterlayout', () => {
|
|
descriptionDiv.innerHTML = 'Layout in Worker, Done!';
|
|
});
|
|
});
|