1. 使用?getData?方法
LogicFlow 提供了?getData?方法，用于獲取當(dāng)前畫(huà)布上的節(jié)點(diǎn)和邊的數(shù)據(jù)。
const lf = new LogicFlow({ // 配置項(xiàng) });
?// 獲取數(shù)據(jù)
const data = lf.getData();
console.log(data);
getData?返回的數(shù)據(jù)結(jié)構(gòu)通常包含?nodes?和?edges?兩個(gè)數(shù)組，分別表示節(jié)點(diǎn)和邊的信息。
2. 監(jiān)聽(tīng)數(shù)據(jù)變化
如果你需要在數(shù)據(jù)變化時(shí)自動(dòng)獲取數(shù)據(jù)，可以監(jiān)聽(tīng)?history:change?事件。
lf.on('history:change', () => { const data = lf.getData(); console.log(data); });
3. 導(dǎo)出數(shù)據(jù)
LogicFlow 還支持將數(shù)據(jù)導(dǎo)出為 JSON 格式，便于保存或傳輸。
const jsonData = lf.getGraphData(); console.log(jsonData);
4. 自定義數(shù)據(jù)格式
如果你需要自定義數(shù)據(jù)格式，可以在?getData?的基礎(chǔ)上進(jìn)行處理。
const rawData = lf.getData();
const customData = {
????nodes: rawData.nodes.map(node => ({
?????????id: node.id, type: node.type, x: node.x, y: node.y, properties: node.properties
?????})),????edges: rawData.edges.map(edge => ({
? ? ? ? id: edge.id, sourceNodeId: edge.sourceNodeId, targetNodeId: ????????edge.targetNodeId, properties: edge.properties????})) };
?console.log(customData);
5. 保存和加載數(shù)據(jù)
你可以將獲取的數(shù)據(jù)保存到本地或服務(wù)器，并在需要時(shí)加載。
// 保存數(shù)據(jù)
const data = lf.getData();
localStorage.setItem('lf-data', JSON.stringify(data));
?// 加載數(shù)據(jù)
?const savedData = JSON.parse(localStorage.getItem('lf-data')); lf.render(savedData);
