拓扑图

今天找资料，突然发现这里我居然什么都没留下过，那就从今天开始更新吧。这篇是之前在http://home.live.com/上写的，只是拿来做个门面，再做些补充，以后再慢慢更新啦。哈哈 :wink:

<!------------------------------------------------------------------>
2009年4月8日
工作需要所以前段时间一直在研究地图及拓扑图.在GOOGLCODE上看到个小组,他们做的拓扑图做的不错,所以就拿来研究研究. http://code.google.com/p/birdeye/
­
1.首先要下载FLEX组件http://birdeye.googlecode.com/svn/trunk/ravis/libRaVis/released-binaries/.然后将组件放到项目里.
­
2.在主应用文件里建立组件显示图

<mx:Canvas id="graphCnvs" width="100%" height="100%"> <ravis:VisualGraph id="vgraph" width="100%" height="100%" paddingBottom="5" left="0" right="0" top="0" bottom="0" backgroundColor="#FFFFFF" alpha="1" itemRenderer="org.un.cava.birdeye.ravis.components.renderers.nodes.RotatedRectNodeRenderer" edgeLabelRenderer="renderers.edgelabels.mxml.basicEdgeLabelRenderer" visibilityLimitActive="true" /> 
<mx:Label text="Double Click Node to Traverse Graph" bottom="0" right="5" /> 
</mx:Canvas> 

­
3.添加数据来源

<mx:XML id="xmldata" source="data/graph.xml" /> 

­
4.添加初始化方法

function initData():void { 
­
graph = new org.un.cava.birdeye.ravis.graphLayout.data.Graph("XMLAsDocsGraph",false,xmldata); 
­
vgraph.graph = graph; 
­
layouter = new CircularLayouter(vgraph); 
vgraph.layouter = layouter; 
­
layouter.autoFitEnabled = true; 
­
vgraph.edgeRenderer = new BaseEdgeRenderer(vgraph.edgeDrawGraphics); 
­
vgraph.maxVisibleDistance = 2; 
­
startRoot = graph.nodeByStringId("1").vnode; 
­
vgraph.displayEdgeLabels = false; 
­
vgraph.currentRootVNode = startRoot; 
initDone = true; 
vgraph.draw(); 
} 
­

OK.运行程序吧.挺有意思的.网上搜了下.发现使用的人比较少,或者说有关内容比较少,所以大部分只能在他们的论坛上查找,也查查API.不过都是英文的.有意思的朋友我们一起探讨研究吧
[img]/upload/attachment/106508/646280b0-5bb6-3df5-9869-ae2bb08fd820.gif[/img]


<!------------------------------------------------------------------>
还可动态添加删除节点，更新数据，更换图标，更换布局。下次再写吧