AntVG6鍦≧eact涓娇鐢細G6鏄竴涓畝鍗曘€佹槗鐢ㄣ€佸畬鏁寸殑鍥惧舰鍙鍖栧紩鎿庛€傚畠鍦ㄩ珮搴﹀畾鍒惰兘鍔涚殑鍩虹涓婏紝鎻愪緵浜嗕竴绯诲垪璁捐浼橀泤銆佹槗浜庝娇鐢ㄧ殑鍥惧舰鍙鍖栬В鍐虫柟妗堛€傚畠鍙互甯姪寮€鍙戜汉鍛樻瀯寤鸿嚜宸辩殑鍥惧舰鍙鍖栥€佸浘褰㈠垎鏋愭垨鍥惧舰缂栬緫鍣ㄥ簲鐢ㄧ▼搴忋€傚畼缃戔殹锔廇ntVG6瀵煎叆椤圭洰浣跨敤npm瀵煎叆鍖卬pminstall--save@antv/g6reloadsdependenciesyarninstallimportsG6importG6from'@antv/g6'鍦ㄩ渶瑕佷娇鐢℅6鐨刯s鏂囦欢涓紱鑷虫锛屽噯澶囧伐浣滅粨鏉燂紝涓嬮潰鎴戜滑鐢℅6鐢诲嚭闇€瑕佺殑鍏崇郴鍥撅紝浠ュ姏鍚戝浘涓轰緥鎻忚堪涓€瀵瑰鍜屼竴瀵逛竴鍏崇郴銆傪煍ㄤ娇鐢ˋntVG6鍒涘缓瀹瑰櫒锛氬湪HTML涓垱寤轰竴涓鍣ㄦ潵瀛樻斁G6缁樺埗鐨勫浘褰紝閫氬父鏄竴涓猟iv鏍囩銆侴6鍦ㄧ粯鍒剁殑鏃跺€欎細鍦ㄥ鍣ㄤ笅闈㈡坊鍔犱竴涓猚anvas鏍囩锛岀劧鍚庡湪閲岄潰缁樺埗鍥惧舰銆俽ef锛氬湪React涓紝鍙互閫氳繃ref.current鑾峰彇鐪熷疄鐨凞OM鍏冪礌銆傝浆鍙慠efs锛堝畼鏂规枃妗ｏ級鍒涘缓鍏崇郴鍥撅細鍒涘缓鍏崇郴鍥撅紙瀹炰緥鍖栵級鏃讹紝鑷冲皯闇€瑕佽缃叧绯诲浘鐨勫鍣ㄣ€佸楂樸€傚叾浣欒鍙傝€冨浘渚嬪搴旂殑API鍜屽畼鏂笰PI鏂囨。锛屾寜闇€閰嶇疆銆俫raph=newG6.Graph({container:ref.current,width:width<1000?387:width,height:width<1000?220:550,layout:{type:'force',preventOverlap:true,linkDistance:(d)=>{if(d.source.id==='node0'){return10;}return80;},nodeStrength:(d)=>{if(d.isLeaf){return200;}return-500;},edgeStrength:(d)=>{if(d.source.edgeStrength){return0.1;}return0.8;},},defaultNode:{color:'#5B8FF9',},edgeStateStyles:{楂樹寒:{stroke:'#5B8FF9'//杩欎釜棰滆壊鍙互鏍规嵁涓汉鍠滃ソ淇敼}},modes:{default:['drag-canvas','zoom-canvas'],},});鏁版嵁澶勭悊涓庡噯澶囷細鏍规嵁鍥捐〃瑕佹眰鐨勬暟鎹牸寮忥紝瀵规暟鎹繘琛屽鐞嗐€傞厤缃暟鎹簮骞舵覆鏌擄細graph.data(data);//灏嗙2姝ヤ腑鐨勬暟鎹簮璇诲彇鍒癵raph涓璯raph.render();//Renderthegraph馃殌璁茶В瀹孉ntVG6鐨勫熀鏈敤娉曞悗锛岄渶瑕佹敞鎰忕殑鏄疪eact锛屽叾涓璆6涓嶅悓浜嶢ntVL7銆丄ntVG2銆丅izCharts銆侫ntVG6鍦ㄤ娇鐢ㄨ繃绋嬩腑闇€瑕佽闂妭鐐广€傚湪浣跨敤瀹冪殑鍥句綔涓虹粍浠舵椂锛屽鏋滃拷鐣ヨ繖涓紝灏变細鍑虹幇闂銆傚湪React涓娇鐢℅6锛堝畼缃戞枃妗ｏ級馃搩AntVG6娉ㄦ剰鍦≧eact涓皢娓叉煋G6鍥惧舰鐨凞emo浣滀负鍖垮悕鍑芥暟杩斿洖锛屽嚱鏁扮殑杩斿洖搴旇鏄笂闈㈠垱寤虹殑瀹瑰櫒锛岃皟鐢ㄦ椂浣滀负缁勪欢浣跨敤鍏朵粬js鏂囦欢涓殑demo锛屽悓鏃朵紶鍏ョ殑鍙傛暟鏄尶鍚嶅嚱鏁扮殑褰㈠弬銆備笂闈㈢浜屾锛氣€滃垱寤哄叧绯诲浘鈥濅腑鐢熸垚鐨勫疄渚嬪簲璇ュ畾涔夊湪鍓綔鐢╱seEffect涓€傚洜涓烘暟鎹槸鍦–ompotentDidMount涓幏鍙栫殑锛屾墍浠ュ湪娓叉煋demo鐨勬椂鍊欙紝鍙兘浼氭湁涓€浜涙暟鎹病鏈夊緱鍒板搷搴旓紝瀵艰嚧demo鐨勬覆鏌撳嚭閿欍€傝В鍐虫柟娉曞涓嬶細{deviceData.length?:<>/>}馃弳瀹炵幇鏁堟灉馃摝瀹屾暣浠ｇ爜鍜岄儴鍒嗚В閲婂涓嬶細Demo.jsimportG6from'@antv/g6';importReact,{useEffect}from"react";importgroupByfrom'lodash/groupBy'importrouterfrom"umi/router";functiondealData(data){//鏁版嵁澶勭悊鍑芥暟constdataGroup=groupBy(data,(item)=>[item.chipGroupName])甯搁噺鑺傜偣=[];const杈?[];璁╃储寮?0锛沶odes.push({id:`node${index}`,size:90,label:"鑺墖缁勭鐞?,edgeStrength:true})for(constkeyindataGroup){index+=1;nodes.push({id:`node${index}`,size:60,label:key,edgeStrength:false,isLeaf:true})edges.push({source:`node0`,target:`node${index}`,label:'chip',routerFlag:0})if(dataGroup[key]){constindexTemp=index;dataGroup[key].map((item)=>{index+=1;nodes.push({id:`node${index}`,size:40,label:item.name,edgeStrength:false})edges.push({source:`node${indexTemp}`,target:`node${index}`,鏍囩:"Product",routerFlag:1})})}}constreturnData={nodes:[...nodes],edges:[...edges],}returnreturnData;}exportdefaultfunction(props){//props涓轰紶鍏ュ弬鏁癱onstref=React.useRef(null)璁╁浘=null;useEffect(()=>{const{g6Data}=props;constdata=dealData(g6Data);constwidth=document.getElementById('test').clientWidth;//鑾峰彇褰撳墠瀹藉害if(!graph){graph=newG6.Graph({//鐢熸垚鍏崇郴鍥惧疄渚媍ontainer:ref.current,//鑾峰彇鐪熷疄鐨凞OM鑺傜偣width:width<1000?387:width,//鏍规嵁闇€瑕佺殑灏哄瀹氫箟楂樺害锛寃idthheight:width<1000?220:550,layout:{//鏍规嵁闇€姹傚拰瀹樻柟API鏂囨。閰嶇疆type:'force',preventOverlap:true,linkDistance:(d)=>{if(d.source.id==='node0'){杩斿洖10;}杩斿洖80;},nodeStringngth:(d)=>{//鏍规嵁闇€姹傚拰瀹樻柟API鏂囨。閰嶇疆闇€瑕乮f(d.isLeaf){return200;}杩斿洖-500锛泒,edgeStrength:(d)=>{//闇€瑕佹牴鎹渶姹傚拰瀹樻柟API鏂囨。閰嶇疆if(d.source.edgeStrength){return0.1;}杩斿洖0.8锛泒,},defaultNode:{//鏍规嵁闇€姹傚拰瀹樻柟API鏂囨。閰嶇疆color:'#5B8FF9',},edgeStateStyles:{//鏍规嵁闇€姹傚拰瀹樻柟API鏂囨。閰嶇疆楂樹寒:{stroke:'#5B8FF9'//杩欎釜棰滆壊鍙互鏍规嵁涓汉鍠滃ソ淇敼}},modes:{//鏍规嵁闇€姹傚拰瀹樻柟API鏂囨。閰嶇疆榛樿:['drag-canvas','zoom-canvas'],},});}const{nodes}=鏁版嵁锛沢raph.data({//缁戝畾鏁版嵁鑺傜偣銆佽竟锛歞ata.edges.map((edge,i)=>{edge.id=`edge${i}`;returnObject.assign({},edge);}),});graph.render();//娓叉煋鍥惧舰//涓嬮潰鏄氦浜掍簨浠剁殑閰嶇疆鍜屾搷浣滃嚱鏁癵raph.on('node:dragstart',(e)=>{graph.layout();refreshDragedNodePosition(e);});graph.on('node:drag',(e)=>{refreshDragedNodePosition(e);});graph.on('node:dragend',(e)=>{e.item.get('model').fx=null;e.item.get('model').fy=null;});graph.zoom(width<1000?0.7:1,{x:300,y:300});graph.on('node:mouseenter',(ev)=>{constnode=ev.item;constedges=node.getEdges();constmodel=node.getModel();constsize=model.size*1.2;graph.updateItem(node,{size,});edges.forEach((edge)=>{graph.setItemState(edge,'highlight',true)});});graph.on('node:click',(e)=>{router.push({pathname:`/DeviceSetting/ChipsetManagement`})});graph.on('node:mouseleave',(ev)=>{constnode=ev.item;constedges=node.getEdges();constmodel=node.getModel();constsize=model.size/1.2;graph.updateItem(node,{size,});edges.forEach((edge)=>graph.setItemState(edge,'highlight',false));});鍑芥暟refreshDragedNodePosition(e){constmodel=e.item.get('model');model.fx=e.x;妯″瀷.fy=e.y;}},[]);return<>;};鍏蜂綋浣跨敤Demo鐨刯s鏂囦欢锛歩mportG6Picturefrom'./Demo'render锛坮eturn锛?>{deviceData.length?:<>/>}锛夛級
