利用Flex组件birdeye绘制拓扑关系图

原文:利用Flex组件birdeye绘制拓扑关系图

birdeye绘制拓扑关系图

1.flex简单介绍

　　Flex 是一个高效、免费的开源框架，可用于构建具有表现力的 Web应用程序，这些应用程序利用Adobe Flash Player和Adobe AIR, 可以实现跨浏览器、桌面和操作系统。虽然只能使用 Flex 框架构建 Flex应用程序，但Adobe Flash Builder™（之前称为 Adobe Flex Builder™）软件可以通过智能编码、交互式遍历调试以及可视设计用户界面布局等功能加快开发。

　　另外，FLEX的另一个组件Springgraph也可以做关系图，刚开始做项目的时候选择的就是这个，后来感觉SPRINGGRAPH的示例没有Birdeye详细，就依然抛弃掉了，不过在这里为大家提供一些帮助信息

　　http://www.chaosreigns.com/code/springgraph/

2.birdeye简单介绍

　　BirdEye是一个开源的Adobe Flex图表制作组件。用于创建多维数据分析可视化界面。birdeye 可以绘制 拓扑图，关系图，流程图，星空图，地图，饼图 等等..

　　birdeye官网的源码现在如果不FQ已经无法下载了，不过网上可以搜到非官网的源码以及一官网demo

3.birdeye应用于项目实战

　　使用birdeye绘制出一个人员关系图，完成后的效果如下

初始化加载的时候，将某一人员的下一级全部展示出来，点击某一个人员选择人员关系，再将所有人员返回展示

4.一步步实现birdeye人员关系图

　　1.借助官方demo的Level4示例

　　官方展示出的图如下

　　1>首先修改渲染的样式，代码如下：

vgraph.edgeRenderer = new DirectedBalloonEdgeRenderer(vgraph.edgeDrawGraphics);
//将这句改为
vgraph.itemRenderer=new ClassFactory(DefaultNodeRenderer);

　　2>修改图形图标

　　修改图标需要修改birdeye的源码，把下载好的源码导入项目，打开EmdeddedIcons.as这个类，添加图片绑定

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

　　接着在generateImage方法中添加如下代码：

case "tree":
img.source = EmbeddedIcons.treeIcon;

操作完成之后，在数据源里边即可使用新添加的图标

　　3>初始化加载数据

　　我在做测试的时候使用的是WebService，接口编写这里不再赘述，直接使用

　　先添加WebService类

<mx:WebService id="ws1" wsdl="http://localhost:5000/FlexService.asmx?wsdl" result="onResult(event)">
        <mx:operation name="getChildNodeXMLByID">
        </mx:operation>
        <mx:operation name="getXml">
        </mx:operation>
        <mx:operation name="getNodeXMLByFTID">
            <mx:request>
                <name>1</name>
            </mx:request>
        </mx:operation>
    </mx:WebService>

　　简单介绍一下，wsdl是接口地址，result是一回调函数，执行获取数据之后的操作，operation是接口中的方法，request是参数

　　完成之后，接下来完成AS代码

　　在creationComplete里边，初始化数据

//初始化加载 数据
                ws1.getOperation("getChildNodeXMLByID").send(1);

　　这里的初始化数据，只是去调用webservice，却并未能对返回的数据进行展示

　　还需要再对Webservice的回调函数中，进行如下操作：

//webservice返回数据之后的处理
internal function onResult(evt:ResultEvent):void
{
    try
    {
/* init a graph object with the XML data */
                graph = new org.un.cava.birdeye.ravis.graphLayout.data.Graph("XMLAsDocsGraph",false,new XML(evt.result));   

/* set the graph in the VGraph object, this automatically
* initializes the VGraph items;
* note: vgraph is the id of the mxml specified VisualGraph component */
vgraph.graph = graph; 

/* set the default layouter type */
layouter = new ConcentricRadialLayouter(vgraph);
vgraph.layouter = layouter;

/* set autofit */
layouter.autoFitEnabled = true;

/* set the layouter */
//    vgraph.edgeRenderer =new DefaultEdgeRenderer;
vgraph.itemRenderer=new ClassFactory(DefaultNodeRenderer);

/* set the layouter */
//vgraph.edgeRenderer = new DirectedBalloonEdgeRenderer(vgraph.edgeDrawGraphics);
/* set the visibility limit options, default 2
* a.k.a degrees of separation */
vgraph.maxVisibleDistance = 2;

/* select a root node, most layouters requires a root node
* Note: Id 1 is referring to node id in the XML file */
startRoot = graph.nodeByStringId("1").vnode;

/* set if edge labels should be displayed */
vgraph.displayEdgeLabels = true;

/* the following kicks it off .... */
vgraph.currentRootVNode = startRoot;
initDone = true;
vgraph.draw();

    }catch(e:Error)
    {
        Alert.show("没有下个节点!");
    }
}

　　至此，如果没有意外，关系图应该可以绘制出来了。

　　4>添加右键菜单

　　选中节点之后，弹出一个对话窗口，选择人员关系，绘制图形

　　数据初始化完成之后，执行如下AS代码

private function showContextMenu():void{
                var myContextMenu:ContextMenu=new ContextMenu();
                var GoUrl1:ContextMenuItem=new ContextMenuItem("人员关系");
                GoUrl1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,rightContextMenu);
                var GoUrl2:ContextMenuItem=new ContextMenuItem("人档查询");
                GoUrl2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,rightContextMenu);
                var GoUrl3:ContextMenuItem=new ContextMenuItem("删除节点");
                GoUrl3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,rightContextMenu);
                var GoUrl4:ContextMenuItem=new ContextMenuItem("删除子节点");
                GoUrl4.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,rightContextMenu);
                myContextMenu.customItems.push(GoUrl1);
                myContextMenu.customItems.push(GoUrl2);
                myContextMenu.customItems.push(GoUrl3);
                myContextMenu.customItems.push(GoUrl4);
                myContextMenu.hideBuiltInItems();
                vgraph.contextMenu=myContextMenu;
                //this.contextMenu=myContextMenu;
            }  

            private function rightContextMenu(event:ContextMenuEvent):void
            {
                if(event.mouseTarget["className"]=="DefaultNodeRenderer")
                {
                    var sid:String=event.mouseTarget["data"].node.stringid;
                    if(event.currentTarget.caption=="人员关系"){
                        //弹出选择窗口
                        var ww:MyWindow;
                        ww = MyWindow(PopUpManager.createPopUp(this.parent,MyWindow));
                        ww.nodeid=sid;
                        PopUpManager.centerPopUp(ww);    

                        GraphRefush.dis.addEventListener(GraphRefush.EVENT_REFUSH,onfefush);

                        //ws1.getOperation("getChildNodeXMLByID").send(sid);

                    }else if(event.currentTarget.caption=="人档查询"){
                        ExternalInterface.call("rygxList","");
                    }else if(event.currentTarget.caption=="删除节点"){
                        Alert.show("确定要删除当前节点吗?");
                    }else{
                        Alert.show("确定要删除当前节点的所有子节点吗?");
                    }
                }
                else
                {
                    Alert.show("请选中节点","提示信息");
                }
            }

　　代码说明:

showContextMenu()方法的功能，主要是创建右键时的弹出菜单
rightContextMenu（）方法的功能，主要是根据点击执行不同的操作。
rightContextMenu（）方法里边有一个。MyWindow，该类是自定义的一MXML组件，主要是显示所有人员关系类型。代码如下：
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="400" height="300" close="titlewindow1_closeHandler(event)" title="人员关系选择">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;

            protected function titlewindow1_closeHandler(event:CloseEvent):void
            {
                // TODO Auto-generated method stub
                PopUpManager.removePopUp(this);
            }
            protected function all_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                if(all.selected)
                {
                    tz.selected=true;
                    tx.selected=true;
                    thk.selected=true;
                    t1.selected=true;
                    t2.selected=true;
                    t3.selected=true;
                    t4.selected=true;
                    t5.selected=true;
                    t6.selected=true;
                }
                else
                {
                    tz.selected=false;
                    tx.selected=false;
                    thk.selected=false;
                    t1.selected=false;
                    t2.selected=false;
                    t3.selected=false;
                    t4.selected=false;
                    t5.selected=false;
                    t6.selected=false;
                }
            }

            public var nodeid:String="";

            protected function save():void
            {
                // TODO Auto-generated method stub
                var b:Birdeye =new Birdeye();

                var result:String="";
                if(tz.selected)
                {
                    result="选中了同住";
                }

                if(tx.selected)
                {
                    if(result!="")
                    {
                        result+=";";
                    }
                    result+="选中了同乡";
                }

                if(thk.selected)
                {
                    if(result!="")
                    {
                        result+=";";
                    }
                    result+="选中了同户口";
                }
                //b.ws1.getOperation("getChildNodeXMLByID").send(nodeid);
                b.reflash(result,nodeid);

                PopUpManager.removePopUp(this);
            }
        ]]>
    </fx:Script>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        .img{

        }
    </fx:Style>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>

    <s:VGroup top="5" width="100%" horizontalAlign="center" verticalAlign="middle">
        <s:HGroup width="100%" horizontalAlign="center">

            <s:VGroup width="33%" horizontalAlign="center">
                <s:Image source="@Embed(‘assets/imgs/x1.png‘)" styleName="img"/><mx:CheckBox label="同住" id="tz"></mx:CheckBox>
            </s:VGroup>
            <s:VGroup width="34%" horizontalAlign="center">
                <s:Image source="@Embed(‘assets/imgs/x2.png‘)" styleName="img"/><mx:CheckBox label="同乡" id="tx"></mx:CheckBox>
            </s:VGroup>
            <s:VGroup width="33%" horizontalAlign="center">
                <s:Image source="@Embed(‘assets/imgs/x3.png‘)" styleName="img"/><mx:CheckBox label="同户口" id="thk"></mx:CheckBox>
            </s:VGroup>
        </s:HGroup>
        <s:HGroup width="100%">
            <s:VGroup width="33%" horizontalAlign="center">
                <s:Image source="@Embed(‘assets/imgs/x4.png‘)" styleName="img"/><mx:CheckBox label="同住宿" id="t1"></mx:CheckBox>
            </s:VGroup>
            <s:VGroup width="34%" horizontalAlign="center">
                <s:Image source="@Embed(‘assets/imgs/x5.png‘)" styleName="img"/><mx:CheckBox label="同车" id="t2"></mx:CheckBox>
            </s:VGroup>
            <s:VGroup width="33%" horizontalAlign="center">
                <s:Image source="@Embed(‘assets/imgs/x6.png‘)" styleName="img"/><mx:CheckBox label="同学" id="t3"></mx:CheckBox>
            </s:VGroup>
        </s:HGroup>
        <s:HGroup width="100%">
            <s:VGroup width="33%" horizontalAlign="center">
                <s:Image source="@Embed(‘assets/imgs/x7.png‘)" styleName="img"/><mx:CheckBox label="朋友" id="t4"></mx:CheckBox>
            </s:VGroup>
            <s:VGroup width="34%" horizontalAlign="center">
                <s:Image source="@Embed(‘assets/imgs/x8.png‘)" styleName="img"/><mx:CheckBox label="同事" id="t5"></mx:CheckBox>
            </s:VGroup>
            <s:VGroup width="33%" horizontalAlign="center">
                <s:Image source="@Embed(‘assets/imgs/x8.png‘)" styleName="img"/><mx:CheckBox label="同村" id="t6"></mx:CheckBox>
            </s:VGroup>
        </s:HGroup>
        <s:HGroup width="100%" paddingTop="5" horizontalAlign="center">
            <s:HGroup horizontalAlign="left">
                <mx:CheckBox id="all" label="全选" click="all_clickHandler(event)"
                             horizontalCenter="left"></mx:CheckBox>
            </s:HGroup>
            <s:HGroup horizontalAlign="center">
                <s:Button label="确定" click="save()">
                </s:Button>
            </s:HGroup>
        </s:HGroup>
    </s:VGroup>
</s:TitleWindow>

5.总结

　　据上所述，需求功能基本上都已实现。里边有很多细节没有仔细去介绍，比如birdeye的节点单击事件，双击事件，右键时的事件操作，以及节点之间的关系，属性展示等，这些在官网的DEMO里边都有详细的说明。

　　

时间： 2024-10-19 18:15:28

利用Flex组件birdeye绘制拓扑关系图的相关文章

利用d3.js绘制雷达图

利用d3,js将数据可视化,可以做到数据与代码的分离,方便以后修改数据. 这次利用d3.js绘制了一个五维的雷达图,即将多个对象的五种属性在一张图上对比. 数据写入data.csv.数据类型写入type.csv文件. 效果如下图所示 源码连接:http://download.csdn.net/detail/svap1/7358123 使用是只需调用 radar()函数即可,如下是测试页面代码. <!DOCTYPE html> <html> <head> <meta

Android自定义组件系列【9】——Canvas绘制折线图

有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas绘制折线图.先看看绘制的效果: 实现原理很简单,我就直接给出代码: package com.example.testcanvasdraw; import java.util.ArrayList; import java.util.List; import java.util.Random; impo

利用matlibplot绘制雷达图

之前在一些数据分析案例中看到用 Go 语言绘制的雷达图,非常的漂亮,就想着用matlibplot.pyplot也照着画一个,遗憾的是matlibplot.pyplot模块中没有直接绘制雷达图的函数,不过可以基于‘polar’图形特征来改进,下面就记录一下如何绘制雷达图. import numpy as np import matplotlib.pyplot as plt # 用于正常显示中文 plt.rcParams['font.sans-serif'] = 'SimHei' #用于正常显示符号

利用javascript和WebGL绘制地球 【翻译】

利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个API我们能够在浏览器中创造出炫酷3D场景的能力.本文将完整的向你展示一些炫酷是如何实现的. 需要特别指出的是,这篇教程我们将会构建一个地球行星模型,这个模型可以像一个兴奋的人一样环绕的旋转,另外,它可能使我们可以获得一些其他程序员的称赞,好吧,就这么多了. 准备 这篇教程我们将会用到一个令人着迷的We

[转]用Matplotlib绘制 折线图 散点图 柱状图 圆饼图

Matplotlib是一个Python工具箱,用于科学计算的数据可视化.借助它,Python可以绘制如Matlab和Octave多种多样的数据图形. 安装 Matplotlib并不是Python的默认组件,需要额外安装. 官方下载地址 http://matplotlib.org/downloads.html 必须下载与自己的Python版本,操作系统类型对应的安装包.如Windows 64位+Python3.3,应该下载matplotlib-1.3.1.win-amd64-py3.3.exe 第

uml绘制类图

用Rational Rose绘制类图,要求如下: 根据下面的陈述画出类图.(文件名命名为助教.mdl) 1)学生包括本科生和研究生两种: 2)研究生的一部分,利用课余时间担任助教: 3)教师包括助教.讲师和教授三种: 4)一名助教可以为一位讲师或一位教授助课:一位讲师只能有一名助教:一位教授可以有5名助教. 其结果如图:

如何利用在线画图网站绘制流程图

流程图在我们的日常生活中运用的非常广泛,一般绘制流程图的方法有两种,一种是手绘,另一种是利用在线网站进行绘制,更多的人们将使用第二种方法进行绘制,那么,对于一名新手来说拿到一个工具应该怎样进行绘制呢?下面将方法分享给大家,一起来看看吧! 使用什么在线网站进行绘制? 随着流程图广泛运用,市面上也出现了很多的画图工具,所以在选择工具的时候很是头疼,迅捷画图是小编经常使用的工具,这是一款在线网站,可以直接在线绘制各种思维导图.流程图等多种图形的工具,里面有大量的实例模板,可以直接在线套用模板进行编辑,

R-forestplot包| HR结果绘制森林图

本文首发于“生信补给站”微信公众号,https://mp.weixin.qq.com/s/2W1W-8JKTM4S4nml3VF51w 更多关于R语言,ggplot2绘图,生信分析的内容,敬请关注小号,给您干货. 上一篇简单的介绍了COX生存分析结果绘制森林图Forest plot(森林图) | Cox生存分析可视化,本文将介绍根据数据集合的基本信息以及点估计值(置信区间区间)的结果直接绘制森林图的方法. 其中点估计值(置信区间)的结果可以是COX也可以是logistic回归等其他方法的结果,适

用canvas绘制折线图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用canvas绘制折线图</title> 6 </head> 7 <body> 8 <canvas id="cv"></canvas> 9 </body> 1