用SpringGraph制作拓扑图和关系图

[复制链接]
查看1 | 回复0 | 2017-11-3 11:00:34 | 显示全部楼层 |阅读模式
SpringGraph是Adobe的Flex2.0的开源组件,它可以显示一套有相互联系的节点关系。该组件允许用户拖动和/或交互的个别节点。数据可以是XML或ActionScript对象。本文使用xml数据来做演示.网上搜下可以搜到几个非常不错的实例..SpringGraph的文档还是比较少的.先来看下本文做出来的效果图."/>图形是自定义的,这里你可以使用任意图形来连接节点.首先引入组件这个不用说,将SpringGraph.swc组件引入到工程.添加头部信息:xmlns:flex=http://www.adobe.com/2006/fcflex:SpringGraphid=springgraphbottom=0top=0right=0left=0backgroundColor=#ffffffmotionThreshold=1.5repulsionFactor=0.60dataProvider={graph}itemRenderer=AtomView/flex:SpringGraph几个属性的介绍:motionThreshold--布局计算停止的时间,有意义的的范围是从0.001到2.0左右。低的数字意味着布局需要更长的时间定下来。高数量意味着布局将更快停止,这个适中即可.repulsionFactor--原子之间的关系间距,默认是0.75dataProvider--不用说,就是你的数据来源.itemRenderer--定义一个项目渲染UIComponent类,这个类可以绘制每个节点的样式以及形状大小.lineColor--线的颜色.autoFit--自动调整,保证该图形不跑出界面这几个属性是我所用到的.可能用自己的语言组织出来不是很明白.大家试试就可以了。之后需要一个符合式的xmlvarstrXML:String=moleculeconvention=/MDLMol/id=/dataSmall/title=/NICOTINE/graphNodeid=/1/prop=/节点文章/color=/0xaf3a42//Nodeid=/1.1/prop=/文章第一篇/color=/0xfa7730//Nodeid=/1.2/prop=/文章第二篇/color=/0x33CC99//Nodeid=/1.3/prop=/文章第三篇/color=/0x6b4c8f//Nodeid=/1.4/prop=/文章第四篇/color=/0x585fee//Nodeid=/1.1.1/prop=/关键字一/color=/0xaf3a42//Nodeid=/1.1.2/prop=/关键字二/color=/0x6b4c8f//Nodeid=/1.1.3/prop=/关键字三/color=/0xfa7730//Nodeid=/1.1.4/prop=/关键字四/color=/0x585fee//EdgefromID=/1/toID=/1.1/order=/1/number=/10//EdgefromID=/1/toID=/1.2/order=/3/number=/15//EdgefromID=/1/toID=/1.3/order=/4/number=/3//EdgefromID=/1/toID=/1.4/order=/2/number=/8//EdgefromID=/1.1/toID=/1.1.1/order=/5/number=/7//EdgefromID=/1.1/toID=/1.1.2/order=/1/number=/4//EdgefromID=/1.1/toID=/1.1.3/order=/3/number=/12//EdgefromID=/1.1/toID=/1.1.4/order=/2/number=/9//EdgefromID=/1.2/toID=/1.1.1/order=/5/number=/100///graph/molecule注意关键的属性fromID和toIDNode节点就是原子,Edge是他们之间的关系.prop是名称,color就是圆的颜色了,order是线的粗细,number的线上显示的文字.Mian.mxml代码flex:SpringGraphid=springgraphbottom=0top=0right=0left=0backgroundColor=#ffffffmotionThreshold=1.5repulsionFactor=0.60dataProvider={graph}autoFit=trueitemRenderer=AtomViewfx:Script[Bindable]publicvargraph:Graph=newGraph();//strXML就是上文写的到那段xmlprivatefunctiongotData(strXml:String):void{//ShowLoding();graph.empty();//获得xml数据varx:XML=newXML(strXml);loadCML(x,graph);}//Thisnamespaceisusedinsome,butnotall,CMLfilespublicstaticvarcmlns:Namespace=newNamespace(x-schema:cml_schema_ie_02.xml);privatestaticfunctionloadCML(cml:XML,g:Graph):void{vargid:String=cml.@id;varitem:Item;foreach(varnode:XMLincml..Node){item=newItem(gidnode.@id);item.data=node;g.add(item);}foreach(nodeincml..cmlns::Node){item=newItem(gidnode.@id);item.data=node;g.add(item);}foreach(varbond:XMLincml..Edge){loadBond(bond,g,gid);}foreach(bondincml..cmlns::Edge){loadBond(bond,g,gid);}}privatestaticfunctionloadBond(bond:XML,g:Graph,gid:String):void{varfromID:String;vartoID:String;varorderString:String;varinfoString:String;varcolorString:String;try{fromID=bond.@fromID;toID=bond.@toID;orderString=bond.@order;infoString=bond.@number;colorString=bond.@color;}catch(e:Error){}varfromItem:Item=g.find(gidfromID);vartoItem:Item=g.find(gidtoID);if((fromItem!=null)(toItem!=null)){varorder:int=int(orderString.toString());vardata:Object={settings:{alpha:0.2,color:colorString,tooltip:测试数据,info:infoString,thicknessrder}};g.link(fromItem,toItem,data);}}/fx:Script注意这句话:vardata:Object={settings:{alpha:0.2,color:colorString,tooltip:”测试数据,info:infoString,thicknessrder}};这句话是设置连接先的样式.itemRenderer=AtomViewAtomView是一个mxml组件用来呈现图形化UIAtomView.mxml代码:Circleid=circledoubleClick=createPopUp(data.data.@pid)/mxabelid=labdoubleClick=createPopUp(data.data.@pid)/mx:Stylesource=index.css/scaleX={Main.getInstance().scaleFactor}scaleY={Main.getInstance().scaleFactor}--mx:Script![CDATA[importcom.adobe.flex.extras.controls.springgraph.Item;importmx.containers.ControlBar;importmx.containers.Panel;importmx.containers.VBox;importmx.controls.Alert;importmx.controls.Button;importmx.controls.Label;importmx.controls.List;importmx.controls.Spacer;importmx.controls.TextInput;importmx.graphics.SolidColor;importmx.graphics.SolidColorStroke;importmx.graphics.Stroke;importmx.managers.PopUpManager;/**项数据**/privatevar_data:Item;/**是否创建完成*/privatevarcreated:Boolean=false;overridepublicfunctionsetdata(d:Object):void{super.data=d;_data=dasItem;if(created)applyData();}/**calledwhenthiscomponentanditschildcomponentsarefullycreated.*/privatefunctioncreationComplete():void{created=true;if(_data!=null)applyData();}/**updatesourviewtorepresentthecurrentItem,whichissomekindofatom.*/privatefunctionapplyData():void{varname:String=getAtomName(_data.dataasXML);var_color:int;vardataXML:XML=_data.dataasXMLvarcolorInt:int=int(dataXML.@color);//thisatomtypeisnotinthe'atomColors'table.useadefault._color=colorInt;//determinethesize.Toafirstapproximation,allatomsareroughlythe//samesize.Seehttp://www.historyoftheuniverse.com/atomsize.html.varlabelX:int=30;varlabelY:int=50;//TODO:figureouthowtodoverticalcenteringautomaticallyvarsize:int=60;this.width=62;this.height=62;circle.color=_color;circle.width=size;circle.height=size;circle.cx=30;circle.cy=30;circle.doubleClickEnabled=true;varorder:int=int(dataXML.@order);lab.width=120;lab.x=5;//labelX;lab.y=20;//labelY;lab.text=name;lab.doubleClickEnabled=true;lab.toolTip=lab.text/ndataXML.@number;size=60order*5;circle.cx=30order*5;circle.cy=30order*5;this.width=62order*10;this.height=62order*10;circle.width=sizeorder*5;circle.height=sizeorder*5;lab.y=20order*5;}/**获得元素名称*/privatefunctiongetAtomName(atomXML:XML):String{varname:String=String(atomXML.@prop);if((name==null)||(name.length==0)){//Wedidn't'findaname.Tryagainusinganamespace.varns:Namespace=Main.cmlns;name=atomXML.ns::string;//.(@builtin==elementType//TODO:theaboveXMLexpressionworks,butisn'ttherightexpression.fixit.}returnname;}/mx:Script{importflash.display.GradientType;importflash.display.InterpolationMethod;importflash.display.SpreadMethod;importflash.geom.Matrix;importmx.core.UIComponent;importmx.effects.Rotate;/**AUIComponentthatissimplyacoloredcircle.**@authorMarkShepherd*/publicclassCircleextendsUIComponent{privatevar_cx:int;privatevar_cy:int;publicfunctionsetcx(i:int):void{_cx=i;}publicfunctionsetcy(i:int):void{_cy=i;}/**thecolorthatthiscirclewillbe*/publicfunctionsetcolor(i:int):void{_color=i;invalidateDisplayList();}/**ourcurrentcolorsetting.*/privatevar_color:int;overrideprotectedfunctionupdateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void{graphics.clear();graphics.beginFill(_color,0.4);graphics.lineStyle(1,0x000000,1,true,nomal,nonegraphics.drawCircle(_cx,_cy,unscaledWidth/2);graphics.endFill();}}}"/>SpringGraph里面有一个Roamer分支Roamer可以分层次展示,并且可以展示历史节点.功能依然强大,有兴趣的朋友可以试试.谁有好的制作拓扑的组件可以推荐下,最近正在制作一个流程图,灰常给力..http://www.cnblogs.com/xiaogangqq123/archive/2011/04/22/2025068.htmlJBPM4—请假流程1、流程图2、流程配置文件-------------------------------------------------------------------------------------...基于Java开发的免费网络拓扑软件-SugarNMSTool随着internet的飞速发展,信息的日益丰富决定着将来的用户界面主要是一种信息界面,从某种意义上说,信息可视化代表着下一代用户界面的方向。虽然信息可视化是一个较新的科学领域,目前绝大多数研究工作都还...网络拓扑自动发现-sugarnms智能网管软件的基础网络拓扑自动发现-sugarnms智能网管软件的基础网络拓扑作为一种表示网络设备逻辑连接与物理连接之间关系的方法,通过它网络管理员可以很直观地掌握当前网络设备的运行状况,准确定位网络中的...实用免费的SNMP网管工具-sugarnmsTool实用免费的SNMP网管工具SugarNMSTool是“北京智和信通技术有限公司”开发的图形化SNMP工具,可以免费使用。工具只有3M大小左右,便于携带,免安装,无数据库,可在Windows、Lin...SNMP免费网管系统-SugarNMSTool随着计算机技术、网络通讯技术及信息化建设的不断深入发展,企业数据中心机房计算机设备及其配套的环境设备数量与日俱增,机房已经成为众多企业数据运转的重要枢纽。安全、高效、可运营的数据中心,以及其精细化管理...
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

网站更新