mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 13:18:40 +08:00
2.4 KiB
2.4 KiB
title | order |
---|---|
Render/Refresh | 1 |
graph.render()
graph.render();
Render the graph with data onto the canvas.
graph.refresh()
Refresh the canvas when the existing data items' configurations is changed in the source data.
Attention: If there are some new nodes/edges/combos to be added or some nodes/edges/combos to be removed, use graph.addItem / graph.removeItem or graph.changeData instead.
Usage
graph.refresh();
graph.paint()
Repaint the canvas. Use it after changing the item's style or state.
Usage
const item = e.item;
const graph = this.graph;
const autoPaint = graph.get('autoPaint');
graph.setAutoPaint(false);
graph.setItemState(item, 'selected', true);
graph.paint();
graph.setAutoPaint(autoPaint);
graph.setAutoPaint(auto)
Whether to repaint the canvas automatically after updating or deleting items.
Parameters
Name | Type | Required | Description |
---|---|---|---|
auto | Boolean | true | Whether to repaint the canvas automatically. |
Usage
const item = e.item;
const graph = this.graph;
const autoPaint = graph.get('autoPaint');
graph.setAutoPaint(false);
graph.setItemState(item, 'selected', true);
graph.paint();
graph.setAutoPaint(autoPaint);
graph.renderCustomGroup(data, groupType)
Render a node group according to the data.
Parameters
Name | Type | Required | Description |
---|---|---|---|
data | Object | true | The data to be rendered |
groupType | string | true | Type of node group. Options: 'circle' or 'rect' |
Usage
const data = {
nodes: [
{
id: 'node1',
groupId: 'group1',
label: 'node1',
},
{
id: 'node2',
groupId: 'group1',
label: 'node2',
},
],
edges: [
{
source: 'node1',
target: 'node2',
},
],
groups: [
{
id: 'group1',
title: {
text: 'My Group 1',
stroke: '#444',
offsetX: -20,
offsetY: 30,
},
},
],
};
// graph is an instance of Graph
graph.renderCustomGroup(data, 'circle');