使用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

(以上转自http://www.cnblogs.com/xiaogangqq123/archive/2011/06/03/2070673.htm  嘿嘿)

我一开始用svn下载的时候一直不行，后来就改成先export to Github再从Github上下载，从而得到的源码。网上有些地方有提供birdeye的例子或源码下载，但基本上都是已经被原作者修改过的了，所以还是推荐从google下载原始代码来看。唯一不好的就是需要翻过去～

闲话不多说了～

birdeye的开发我是用的FlexBuilder3来弄的，一开始用的是FlashBuilder4，后来发现会报错，而对于我这个之前根本没接触过Flex的人当然是不熟悉的，就直接下了FB3来，哈～就不报错了。FB3的下载及破解，百度吧 嘿嘿～哦对了，调试需要用到特定版本的Flash debug

（可以参考下这个帖子 http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/03/12/1982431.html）

1.birdeye使用的数据格式

birdeye传递数据的格式采用的是xml，xml可以是读取文件，也可以是通过webservice接口产生

xml的数据结构 

<Graph>  <Node id="1" name="0" desc="This is a description" nodeColor="0x333333" nodeSize="32" nodeClass="earth" nodeIcon="center" x="10" y="10" />  <Node id="2" name="A" desc="This is a description" nodeColor="0x8F8FFF" nodeSize="12" nodeClass="tree" nodeIcon="2" x="10" y="15" />  <Node id="3" name="B" desc="This is a description" nodeColor="0xF00000" nodeSize="36" nodeClass="tree" nodeIcon="3" x="10" y="20" />  <Edge fromID="1" toID="2" edgeLabel="No Change" flow="50" color="0x556b2f" edgeClass="sun" edgeIcon="NoChange" />  <Edge fromID="1" toID="3" edgeLabel="Bad" flow="400" color="0xcd5c5c" edgeClass="sun" edgeIcon="Bad" /> </Graph>

以上定义了三个节点Node，两条线Edge(节点1-节点2，节点1-节点3)

Node定义的是拓扑中的点，id是唯一的标识，name名称，desc说明，nodecolor节点颜色，nodeSize节点大小，nodeClass节点类型，nodeIcon节点图标，x y未知

Edge定义的是拓扑中的线，fromID 跟toID定义了线相连的两头节点，edgeLabel线上文本，color线的颜色， 

2.修改节点的图标

图标保存在路径“src\org\un\cava\birdeye\ravis\assets\icons\”中

在以下文件“src\org\un\cava\birdeye\ravis\assets\icons\EmbeddedIcons.as”中修改

可增加新的图标标识

 [Bindable][Embed(source="nodes/13.png")] static public var n13Icon:Class;

source定义了图标的路径，在icons路径下的nodes文件夹的13.png图标

然后在该文件接下来的switch代码出增加相应的case语句

switch(type) {case "ravis":img.source = EmbeddedIcons.ravisIcon;break; case "refresh": img.source = EmbeddedIcons.refreshIcon; break;/*...*/case "13":    img.source = EmbeddedIcons.n13Icon;        break;

这样只要在xml数据中的node节点里面指定nodeIcon属性为你所需要的图标的名称，就可以让拓扑显示你需要的图标了。如果读取失败则会显示为一片树叶

PS:Birdeye生成的拓扑是必须连贯的，不能出现断点，即任一节点都必须能够从顶节点(默认设置是id为1的节点)出发到达，否则在拓扑图中是不会生成的，包括其后的节点跟连线也不会出现

3.通过WS获取xml数据

定义ws

<mx:WebService id="MyService" useProxy="false" result="onResult(event)" fault="onFault(event)"><mx:operation name="FlexGraph"/></mx:WebService>

在定义的mxml文件mx:Application节点内加入以上代码。这样就定义了一个名称为MyService的对象，onResult为调用成功的处理方法，onFault为调用失败的方法，mx:operation为调用的方法名称

调用方式

<pre name="code" class="java" style="font-size: 13px; line-height: 19px;">this.MyService.wsdl = config.url; 

this.MyService.getOperation("FlexGraph").send("sda");

先指定调用的wsdl地址，然后调用方法传参。调用结果在onResult方法里面处理

config为声明的一个配置xmll文件对象

<mx:Model id="config" source="assets/config.xml"/>

onResult方法，我是在里面写拓扑生成的实现

private function onResult(event:ResultEvent):void{try{//你的代码}}

也可以在脚本里面直接声明一个webservice对象

var ws:WebService ;ws = new WebService();ws.wsdl = config.url; ws.loadWSDL();  ws.FlexTestUrl.addEventListener(ResultEvent.RESULT,onResult);ws.FlexTestUrl.addEventListener(FaultEvent.FAULT,onFault);var paramss:String ="test"；ws.FlexTestUrl(paramss);

 这里最后是调用FlexTestUrl的方法，该方法应该在ws里面定义

 4.节点事件

private function addEventListeners():void            {             vgraph.addEventListener(VisualNodeEvent.DOUBLE_CLICK, nodeEventHandler);                //vgraph.addEventListener(VGEdgeEvent.VG_EDGE_CLICK, edgeEventHandler);            }                        private function edgeEventHandler(event:VGEdgeEvent):void            {                var dataInfo:String                if (event.edge.data is XML)                    dataInfo = event.edge.data.toXMLString();                else                    dataInfo = ObjectUtil.toString(event.edge.data);                Alert.show("EDGE EVENT: " + event.type + ", data = " + dataInfo)            }                         private function nodeEventHandler(event:VisualNodeEvent):void            {             var newurl:String;            newurl = config.flashPageUrl;            Alert.show(newurl);            ExternalInterface.call("function() " +             "{window.location.href='" + newurl + "';} " +             "");            } 

addEventListeners添加节点事件，edgeEventHandler为连线点击事件，nodeEventHandler为节点点击事件。

5.构建拓扑

拓扑的生成在ws调用成功的事件onResult里面定义

*ws方法调用成功处理事件            *此处实际是进行拓扑的构画             */private function onResult(event:ResultEvent):void{try{/* init a graph object with the XML data */                vgraph.graph = new Graph("XMLAsDocsGraph",false,new  XML(event.result));                                 /* assign start root 拓扑图开始的顶节点 默认指定id为1的节点*/                vgraph.currentRootVNode = vgraph.graph.nodeByStringId("1").vnode;                                /* provide the control components with some initial settings */ <span style="font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;">                </span>//星状布局                layouter = new ConcentricRadialLayouter(vgraph);//这是树状布局 不过要引用不同的包//layouter = new HierarchicalLayouter(vgraph);//HierarchicalLayouter(layouter).orientation = HierarchicalLayouter.ORIENT_TOP_DOWN;                                 //设定自动适应layouter.autoFitEnabled = true;vgraph.layouter = layouter;                                  vgraph.itemRenderer = new ClassFactory(IconNodeRenderer);                                                 vgraph.edgeRendererFactory = new ClassFactory(BaseEdgeRenderer);                                 vgraph.edgeLabelRenderer = new ClassFactory(WFBEdgeLabelRenderer);                 //最大可访问层级                vgraph.maxVisibleDistance = 3;                 //添加事件监听                addEventListeners();                                /* the following kicks it off .... */                vgraph.draw();}catch(e:Error){Alert.show("cannot find the next node " + e.message);}}

5.总结

用birdeye生成拓扑还是很放方便的，个人觉得最使用的地方是那些星状或者树状的图，最好是没有独立节点的，如果真的要显示独立节点，我的处理方式是把线的颜色设为白色，因为默认的画布颜色是白色底，这样在不是非常密集的情况下就看不出啥，就是排列的时候是成环状的。

birdeye深层怎么处理拓扑生成的，怎么遍历的数据节点的，怎么确定各个节点的位置的，这些因为项目急着要就没有去深入研究了。如果有大神了解的，欢迎交流说明一下，因为我本来想把一些节点的线设为虚线的，但是不知道该在哪里修改～～

好了，就这样吧 欢迎指正本文的不足！

上一张示例生成的图哈～