1. 畫布只重新渲染數據

• graph.render = graph.draw+graph,fitview()+graph.fitCenter()
• setData塞入新的數據

const updateGraph = (data) => {if (!graph) {console.warn("Graph is not initialized");return;}graph.clear();graph.setData(data);graph.render();
};

2. 畫布修改大小

const resizeGraph = (width, height) => {if (!graph) return;graph.setSize(width, height);
};

3. 獲取畫布寬高

1. 使用ref元素獲取panelRef.value.$el.clientWidth/cilentHeight
2. 如果這個div塊是一會兒顯示一會兒隱藏，為了1獲取寬高生效，在隱藏的時候，css:display:none不行，讀出來的一直都是0，應該用display:hidden

4. 定義combo、node、edge的樣式

1. 節點

1. 節點/邊設置

node: {style: (d) => {return setNodeStyle(d);},},edge: {type: "cubic-vertical",style: (d) => {return setEdgeStyle(data, d);},},

2. 節點大小、標簽、標簽背景、字體大小、邊框虛實等樣式都是定義在style里，style和type是并列元素

• 標簽過長換行： labelMaxWidth是基于節點的寬度設置的百分比。

	labelWordWrap: true,labelMaxLines: 10,labelMaxWidth: "500%"

• 完整配置

const setNodeStyle = (d) => {//flag：true-真實節點；false-虛擬節點let style = {size: NodeColor.find((item) => +item.category === +d.category)?.size || 16, //節點大小labelText: d.name,labelPlacement: "bottom",lineWidth: d.flag ? 0 : 1,lineDash: [5, 1],stroke: fillNodeColor(d), //節點邊框顏色// labelOffsetX: 8,labelOffsetY: 4,labelTextAlign: "center",labelFontSize: 8,labelWordWrap: true,labelMaxLines: 10,labelMaxWidth: "500%",labelFontStyle: "italic",labelBackground: true,labelBackgroundFill:"linear-gradient(rgba(230,100,101,0.12), rgba(145,152,229,0.12))",labelBackgroundStroke: "rgba(230,100,101,0.4)",labelBackgroundRadius: 2,ports: [{ placement: "top" }, { placement: "bottom" }],fill: fillNodeColor(d), //節點顏色};return style;
}

• 定義節點邊框虛實：lineDash，邊框顏色：stroke；邊寬：lineWidth
• 定義節點填充色：fill

2. combo

1. combo設置

 combo: {type: "rect",style: (d) => {return setComboStyle(d);},},

2. combo樣式

const setComboStyle = (d) => {let style = {padding: 15,lineDash: [5, 5],lineWidth: 1,radius: 4,fill: "rgba(120,99,255,0.5)",zIndex: 10, //不讓點擊combo里的節點，而是點擊combo彈框labelText: JSON.stringify(d.count) || "0", //必須是string類型，number類型會報錯labelPlacement: "bottom",lineWidth: 1,lineDash: [5, 1],stroke: "rgba(120,99,255,0.5)", //節點邊框顏色labelOffsetY: 10,labelFontSize: 12,labelFontStyle: "italic",};return style;
};