birdeye 绘制拓扑关系图
birdeye概述
BirdEye是一个开源的Adobe Flex图表制作组件。用于创建多维数据分析可视化界面。
birdeye 可以绘制 拓扑图，关系图，流程图，星空图，地图，饼图 等等..
birdeye 项目地址：http://code.google.com/p/birdeye/
birdeye 源码下载：http://code.google.com/p/birdeye/source/checkout 需要用SVN.
birdeye Demo:http://birdeye.googlecode.com/svn/branches/ng/examples/demo/BirdEyeExplorer.html
birdeye svn源码地址：
svn checkout http://birdeye.googlecode.com/svn/trunk/ birdeye-read-only
checkout 大约几分钟的时间 下载下来的源码如下
每个文件夹里面对应了一类图形. 导入的项目可能会报错,注意查看每个文件夹下的lib目录下的swc文件 引入即可。
ravis 下是拓扑图
导入工程后，运行Level4.mxml
birdeyeravis 传递数据的方式也是通过xml
xml结构如下：
节点
<Node id="1" name="0" desc="This is a description" nodeColor="0x333333" nodeSize="32" nodeClass="earth" nodeIcon="center" x="10" y="10" />
name-就是显示名, desc-是描述,可以不显示. nodeColot -是节点颜色. nodeSize-节点大小. nodeClass-节点样式, nodeIcon-不清楚属性，
连接的关系xml
<Edge fromID="1" toID="2" edgeLabel="No Change" flow="50" color="0x556b2f" edgeClass="sun" edgeIcon="NoChange" />
fromID toID就不用说了，edgeLabel-线上的显示名 color -线的颜色, edgeClass-线的样式
xml和SpringGraph绘制拓扑图的xml结构有点相似吧…
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ravis="org.un.cava.birdeye.ravis.graphLayout.visual.*" xmlns:lc="org.un.cava.birdeye.ravis.components.ui.controls.layouterControls.*" xmlns:vc="org.un.cava.birdeye.ravis.components.ui.controls.vgraphControls.*" xmlns:flexlib="http://code.google.com/p/flexlib/" creationComplete="init();" width="100%" height="100%" > <mx:Script> <![CDATA[ import mx.controls.Alert; import org.un.cava.birdeye.ravis.components.ui.controls.layouterControls.LayoutSelector; import org.un.cava.birdeye.ravis.components.ui.controls.layouterControls.PhiDial; import org.un.cava.birdeye.ravis.components.ui.controls.vgraphControls.EdgeRendererSelector; import org.un.cava.birdeye.ravis.graphLayout.data.Graph; import org.un.cava.birdeye.ravis.graphLayout.data.IGraph; import org.un.cava.birdeye.ravis.graphLayout.layout.ConcentricRadialLayouter; import org.un.cava.birdeye.ravis.graphLayout.layout.IAngularLayouter; import org.un.cava.birdeye.ravis.graphLayout.layout.ILayoutAlgorithm; import org.un.cava.birdeye.ravis.graphLayout.layout.ParentCenteredRadialLayouter; import org.un.cava.birdeye.ravis.graphLayout.visual.IEdgeRenderer; import org.un.cava.birdeye.ravis.graphLayout.visual.IVisualNode; import org.un.cava.birdeye.ravis.graphLayout.visual.VisualGraph; import org.un.cava.birdeye.ravis.graphLayout.visual.edgeRenderers.DirectedBalloonEdgeRenderer; import renderers.edgelabels.mxml.basicEdgeLabelRenderer; private var graph:IGraph; private var layouter:IAngularLayouter; private var selectedEdgeRenderer:IEdgeRenderer; private var startRoot:IVisualNode; private var itemCount:int = 0; private var initDone:Boolean = false; private function init():void{ var strXML:String = "<graph>" + "<Node id=\"1\" name=\"\" nodeColor=\"0xaf3a99\" nodeSize=\"0\" nodeIcon=\"center\" />" + "<Node id=\"2\" name=\"B60R\" nodeColor=\"0xaf3a42\" nodeSize=\"50\" />" + "<Node id=\"3\" name=\"H01L\" nodeColor=\"0xaf3a42\" nodeSize=\"50\" />" + "<Node id=\"4\" name=\"B24B\" nodeColor=\"0xaf3a42\" nodeSize=\"50\" />" + "<Node id=\"5\" name=\"H01M\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Node id=\"6\" name=\"B25J\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" + "<Node id=\"7\" name=\"G05B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Node id=\"8\" name=\"H04L\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" + "<Node id=\"9\" name=\"H01R\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Node id=\"10\" name=\"G05G\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" + "<Node id=\"11\" name=\"H05K\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" + "<Node id=\"12\" name=\"H01H\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" + "<Node id=\"13\" name=\"H03H\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" + "<Node id=\"14\" name=\"G06F\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" + "<Node id=\"15\" name=\"H04Q\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" + "<Node id=\"16\" name=\"A63B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Node id=\"17\" name=\"G06T\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Node id=\"18\" name=\"E05B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Node id=\"19\" name=\"G01N\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Node id=\"20\" name=\"F02B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Node id=\"21\" name=\"F04C\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Node id=\"22\" name=\"B23C\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Node id=\"23\" name=\"H04B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Node id=\"24\" name=\"B62D\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Node id=\"25\" name=\"H02K\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" + "<Edge fromID=\"1\" toID=\"2\" edgeLabel=\"\" color=\"0xFFFFFF\" />" + "<Edge fromID=\"2\" toID=\"3\" edgeLabel=\"1228\" color=\"0x556b2f\" />" + "<Edge fromID=\"4\" toID=\"3\" edgeLabel=\"589\" color=\"0x556b2f\" />" + "<Edge fromID=\"4\" toID=\"5\" edgeLabel=\"233\" color=\"0x556b2f\" />" + "<Edge fromID=\"4\" toID=\"6\" edgeLabel=\"216\" color=\"0x556b2f\" />" + "<Edge fromID=\"6\" toID=\"7\" edgeLabel=\"294\" color=\"0x556b2f\" />" + "<Edge fromID=\"6\" toID=\"8\" edgeLabel=\"211\" color=\"0x556b2f\" />" + "<Edge fromID=\"2\" toID=\"8\" edgeLabel=\"553\" color=\"0x556b2f\" />" + "<Edge fromID=\"3\" toID=\"9\" edgeLabel=\"244\" color=\"0x556b2f\" />" + "<Edge fromID=\"1\" toID=\"10\" edgeLabel=\"\" color=\"0xFFFFFF\" />" + "<Edge fromID=\"10\" toID=\"11\" edgeLabel=\"701\" color=\"0x556b2f\" />" + "<Edge fromID=\"1\" toID=\"12\" edgeLabel=\"\" color=\"0xFFFFFF\" />" + "<Edge fromID=\"12\" toID=\"13\" edgeLabel=\"523\" color=\"0x556b2f\" />" + "<Edge fromID=\"1\" toID=\"14\" edgeLabel=\"\" color=\"0xFFFFFF\" />" + "<Edge fromID=\"14\" toID=\"15\" edgeLabel=\"522\" color=\"0x556b2f\" />" + "<Edge fromID=\"1\" toID=\"16\" edgeLabel=\"\" color=\"0xFFFFFF\" />" + "<Edge fromID=\"16\" toID=\"17\" edgeLabel=\"402\" color=\"0x556b2f\" />" + "<Edge fromID=\"1\" toID=\"18\" edgeLabel=\"\" color=\"0xFFFFFF\" />" + "<Edge fromID=\"18\" toID=\"19\" edgeLabel=\"350\" color=\"0x556b2f\" />" + "<Edge fromID=\"1\" toID=\"20\" edgeLabel=\"\" color=\"0xFFFFFF\" />" + "<Edge fromID=\"20\" toID=\"21\" edgeLabel=\"304\" color=\"0x556b2f\" />" + "<Edge fromID=\"1\" toID=\"22\" edgeLabel=\"\" color=\"0xFFFFFF\" />" + "<Edge fromID=\"22\" toID=\"23\" edgeLabel=\"300\" color=\"0x556b2f\" />" + "<Edge fromID=\"1\" toID=\"24\" edgeLabel=\"\" color=\"0xFFFFFF\" />" + "<Edge fromID=\"24\" toID=\"25\" edgeLabel=\"298\" color=\"0x556b2f\" />" + "</graph>" initData(strXML); // //nodeSize 球的大小, nodeColor 节点的颜色 edgeLabel=线上的描述 ExternalInterface.addCallback("GetXMLFunction",initData); } private function initData(strXML:String):void { var xmldata:XML = new XML(strXML); graph = new org.un.cava.birdeye.ravis.graphLayout.data.Graph("XMLAsDocsGraph",false,xmldata); vgraph.graph = graph; layouter = new ParentCenteredRadialLayouter(vgraph); vgraph.layouter = layouter; layouter.autoFitEnabled = false; //layouter.linkLength = 300; //layouter.phi = 300; //layouter.layoutChanged = true; vgraph.edgeRendererFactory = new ClassFactory(DirectedBalloonEdgeRenderer); vgraph.maxVisibleDistance = 5; //指定根节点 startRoot = graph.nodeByStringId("1").vnode; vgraph.displayEdgeLabels = true; vgraph.currentRootVNode = startRoot; initDone = true; //线条样式 var myEdgeRender:EdgeRendererSelector = new EdgeRendererSelector(); myEdgeRender.selectedItem = "Default"; myEdgeRender.vgraph = vgraph; myEdgeRender.changeEdgeRenderer(); var selector:LayoutSelector = new LayoutSelector(); selector.vgraph = vgraph; selector.selectedItem = "ConcentricRadial"; selector.changeLayouter(); vgraph.draw(); } ]]> </mx:Script> <mx:Style source="styles/main.css" /> <mx:Canvas id="graphCnvs" width="100%" height="100%" > <ravis:VisualGraph id="vgraph" width="100%" height="100%" left="0" right="0" top="0" bottom="5" backgroundColor="#FFFFFF" alpha="1" itemRenderer="renderers.nodes.mxml.sizeColorNodeRenderer" edgeLabelRenderer="renderers.edgelabels.mxml.basicEdgeLabelRenderer" resize="vgraph.draw(VisualGraph.DF_RESET_LL)" visibilityLimitActive="true" > </ravis:VisualGraph> <flexlib:WindowShade id="layoutContainer" styleName="linkButtonWindowShade" label="设置" width="400" opened="false" horizontalAlign="center" paddingBottom="5" visible="false"> <lc:PhiDial id="myPhiDial" vgraph="{vgraph}" /> <lc:ToggleDamping id="myDamping" vgraph="{vgraph}" /> <lc:CommonLayoutControls id="myCommonLC" vgraph="{vgraph}" /> </flexlib:WindowShade> </mx:Canvas> </mx:Application>
效果如下:
线的长度只有通过控件才能设置,我是通过修改源码来达到固定的。
birdeye 与SpringGraph的一点区别在于 不会随意飘动，并且效果还不错。如果不想看到他的双击事件也可以通过修改源码实现.