5.0以上版本antv/g6使用心得

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. 获取画布宽高

使用ref元素获取panelRef.value.$el.clientWidth/cilentHeight
如果这个div块是一会儿显示一会儿隐藏，为了1获取宽高生效，在隐藏的时候，css:display:none不行，读出来的一直都是0，应该用display:hidden

4. 定义combo、node、edge的样式

1. 节点

节点/边设置

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

节点大小、标签、标签背景、字体大小、边框虚实等样式都是定义在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

combo设置

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

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;
};