要實現節點的折疊和展開,可以通過添加一個按鈕或者點擊節點本身來觸發折疊和展開操作。以下是一個示例代碼:
// 創建一個簡單的流程圖
var chart = new Flowchart({
container: '#chart',
data: {
nodes: [
{id: '1', text: 'Node 1'},
{id: '2', text: 'Node 2'},
{id: '3', text: 'Node 3'}
],
edges: [
{source: '1', target: '2'},
{source: '2', target: '3'}
]
}
});
// 給節點添加折疊和展開功能
chart.on('node:click', function (node) {
if (node.collapsed) {
chart.expandNode(node.id);
} else {
chart.collapseNode(node.id);
}
});
在上面的示例中,我們創建了一個簡單的流程圖,并為每個節點添加了點擊事件。當點擊一個節點時,會切換該節點的折疊狀態,如果節點是折疊的,則展開節點,如果節點是展開的,則折疊節點。通過這種方式,可以實現節點的折疊和展開功能。