用SpringGraph制作拓扑图和关系图

SpringGraph是Adobe的Flex 2.0的开源组件，它可以显示一套有相互联系的节点关系。该组件允许用户拖动和/或交互的个别节点。数据可以是XML或ActionScript对象。

本文使用xml数据来做演示.

网上搜下可以搜到几个非常不错的实例..SpringGraph 的文档还是比较少的.

先来看下本文做出来的效果图.

图形是自定义的,这里你可以使用任意图形来连接节点.

首先引入组件这个不用说,将SpringGraph.swc 组件引入到工程.

添加头部信息:   xmlns:flex="http://www.adobe.com/2006/fc"

<flex:SpringGraph id="springgraph" bottom="0" top="0" right="0" left="0" backgroundColor="#ffffff"
                      motionThreshold="1.5"  repulsionFactor="0.60" dataProvider="{graph}" itemRenderer="AtomView">
</flex:SpringGraph>

几个属性的介绍:

motionThreshold--布局计算停止的时间，有意义的值的范围是从0.001到2.0左右。低的数字意味着布局需要更长的时间定下来。高数量意味着布局将更快停止,这个值适中即可.

repulsionFactor--原子之间的关系间距,默认是0.75

dataProvider--不用说,就是你的数据来源.

itemRenderer--定义一个项目渲染UIComponent类,这个类可以绘制每个节点的样式以及形状大小.

lineColor --线的颜色.

autoFit--自动调整,保证该图形不跑出界面

这几个属性是我所用到的.可能用自己的语言组织出来不是很明白.大家试试就可以了。

之后需要一个符合格式的xml

var strXML:String = "<molecule convention=\"MDLMol\" id=\"dataSmall\" title=\"NICOTINE\">" +
  "<graph>" +
    "<Node id=\"1\"   prop=\"节点文章\"   color=\"0xaf3a42\" />" +
    "<Node id=\"1.1\" prop=\"文章第一篇\" color=\"0xfa7730\"  />" +
    "<Node id=\"1.2\" prop=\"文章第二篇\" color=\"0x33CC99\"/>" +
    "<Node id=\"1.3\" prop=\"文章第三篇\" color=\"0x6b4c8f\" />" +
    "<Node id=\"1.4\" prop=\"文章第四篇\" color=\"0x585fee\" />" +
    "<Node id=\"1.1.1\" prop=\"关键字一\" color=\"0xaf3a42\" />" +
    "<Node id=\"1.1.2\" prop=\"关键字二\" color=\"0x6b4c8f\"  />" +
    "<Node id=\"1.1.3\" prop=\"关键字三\" color=\"0xfa7730\"  />" +
    "<Node id=\"1.1.4\" prop=\"关键字四\" color=\"0x585fee\" />" +

    "<Edge fromID=\"1\" toID=\"1.1\" order=\"1\" number=\"10\"/>" +
    "<Edge fromID=\"1\" toID=\"1.2\" order=\"3\" number=\"15\"/>" +
    "<Edge fromID=\"1\" toID=\"1.3\" order=\"4\" number=\"3\"/>" +
    "<Edge fromID=\"1\" toID=\"1.4\" order=\"2\" number=\"8\"/>" +
    "<Edge fromID=\"1.1\" toID=\"1.1.1\" order=\"5\" number=\"7\"/>" +
    "<Edge fromID=\"1.1\" toID=\"1.1.2\" order=\"1\" number=\"4\"/>" +
    "<Edge fromID=\"1.1\" toID=\"1.1.3\" order=\"3\" number=\"12\"/>" +
    "<Edge fromID=\"1.1\" toID=\"1.1.4\" order=\"2\" number=\"9\"/>" +
    "<Edge fromID=\"1.2\" toID=\"1.1.1\" order=\"5\" number=\"100\"/>" +
    "
</graph>
</molecule>";

注意关键的属性 fromID 和toID 

Node节点就是原子,Edge是他们之间的关系. prop 是名称 ,color就是圆的颜色了,order是线的粗细,number 的线上显示的文字.

Mian.mxml代码

<flex:SpringGraph id="springgraph" bottom="0" top="0" right="0" left="0" backgroundColor="#ffffff" 

                  motionThreshold="1.5"  repulsionFactor="0.60" dataProvider="{graph}" autoFit="true"  itemRenderer="AtomView">

<fx:Script>

        [Bindable]

        public var graph: Graph = new Graph();

        //strXML就是上文写的到那段xml

        private function gotData(strXml:String): void {

            //ShowLoding();

            graph.empty();

            // 获得xml数据

            var x:XML = new XML(strXml);

            loadCML(x, graph);    

        }

        // This namespace is used in some, but not all, CML files

        public static var cmlns:Namespace = new Namespace("x-schema:cml_schema_ie_02.xml");

        private static function loadCML(cml: XML, g: Graph): void {

            var gid: String = cml.@id;

            var item: Item;

            for each (var node: XML in cml..Node) {

                item = new Item(gid + node.@id);

                item.data = node;

                g.add(item);

            }

            for each (node in cml..cmlns::Node) {

                item = new Item(gid + node.@id);

                item.data = node;

                g.add(item);

            }

            for each (var bond: XML in cml..Edge) {

                loadBond(bond, g, gid);

            }

            for each (bond in cml..cmlns::Edge) {

                loadBond(bond, g, gid);

            }

        }

        private static function loadBond(bond: XML, g: Graph, gid: String): void {

            var fromID: String;

            var toID: String;

            var orderString: String;

            var infoString:String;

            var colorString:String;

            try {

                fromID = bond.@fromID;

                toID = bond.@toID;

                orderString = bond.@order;

                infoString = bond.@number;

                colorString = bond.@color;

            } catch (e: Error) {

            }

            var fromItem: Item = g.find(gid + fromID);

            var toItem: Item = g.find(gid + toID);

            if((fromItem != null) && (toItem != null)) {

                var order: int = int(orderString.toString());

                var data: Object = {settings: {alpha: 0.2 , color: colorString, tooltip: "测试数据",info:infoString, thickness: order}};

                g.link(fromItem, toItem, data);

            }

        }

</fx:Script>

注意这句话:

var data: Object = {settings:{alpha:0.2,color:colorString,tooltip:”测试数据",info:infoString,thickness: order}};

这句话是设置连接先的样式.

itemRenderer="AtomView"

AtomView 是一个mxml组件 用来呈现图形化UI

AtomView.mxml代码:

<Circle id="circle" doubleClick="createPopUp(data.data.@pid)"/>

<mx:Label id="lab"  doubleClick="createPopUp(data.data.@pid)"/>

<mx:Style source="index.css"/>

    scaleX="{Main.getInstance().scaleFactor}" 

scaleY="{Main.getInstance().scaleFactor}" -->

<mx:Script>

<![CDATA[

        import com.adobe.flex.extras.controls.springgraph.Item;

        import mx.containers.ControlBar;

        import mx.containers.Panel;

        import mx.containers.VBox;

        import mx.controls.Alert;

        import mx.controls.Button;

        import mx.controls.Label;

        import mx.controls.List;

        import mx.controls.Spacer;

        import mx.controls.TextInput;

        import mx.graphics.SolidColor;

        import mx.graphics.SolidColorStroke;

        import mx.graphics.Stroke;

        import mx.managers.PopUpManager;

        /**    项数据 **/

        private var _data: Item;

        /** 是否创建完成 */

        private var created: Boolean = false;

        override public function set data(d: Object): void {

            super.data = d;

            _data = d as Item;

            if(created)

                applyData();

        }

        /** called when this component and its child components are fully created. */

        private function creationComplete(): void {

            created = true;

            if(_data != null)

                applyData();

        }

        /** updates our view to represent the current Item, which is some kind of atom. */

        private function applyData(): void {

            var name: String = getAtomName(_data.data as XML);

            var _color: int;

            var dataXML:XML = _data.data as XML

            var colorInt:int = int(dataXML.@color);

            // this atom type is not in the \'atomColors\' table. use a default.

            _color = colorInt;

            // determine the size. To a first approximation, all atoms are roughly the

            // same size. See http://www.historyoftheuniverse.com/atomsize.html. 

              var labelX: int = 30;

              var labelY: int = 50; // TODO: figure out how to do vertical centering automatically

            var size: 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;    

            var order: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 + "\n" + dataXML.@number;

                size = 60+order*5;

                circle.cx = 30+order*5;

                circle.cy = 30+order*5;

                this.width = 62+order*10;

                this.height = 62+order*10;

                circle.width = size+order*5;

                circle.height = size+order*5;

                lab.y = 20+order*5;

        }

        /** 获得元素名称 */

        private function getAtomName(atomXML: XML): String {

            var name: String = String(atomXML.@prop);

            if((name == null) || (name.length == 0)) {

                // We didn\'t\' find a name. Try again using a namespace.

                var ns: Namespace = Main.cmlns;

                name = atomXML.ns::string; // .(@builtin == "elementType");

                // TODO: the above XML expression works, but isn\'t the right expression. fix it.

}

            return name;

        }

</mx:Script>    

Circle是一个自定义圆的UIComponent

Circle代码

package 

{

    import flash.display.GradientType;

    import flash.display.InterpolationMethod;

    import flash.display.SpreadMethod;

    import flash.geom.Matrix;

    import mx.core.UIComponent;

    import mx.effects.Rotate;

    /** A UIComponent that is simply a colored circle.

     * 

     * @author Mark Shepherd

     */

    public class Circle extends UIComponent

    {

        private var _cx:int;

        private var _cy:int;

        public function set cx(i: int): void {

            _cx = i;

        }

        public function set cy(i: int): void {

            _cy = i;

        }

        /** the color that this circle will be */

        public function set color(i: int): void {

            _color = i;

            invalidateDisplayList(); 

        }

        /** our current color setting. */

        private var _color: int;

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

            graphics.clear();

            graphics.beginFill(_color,0.4);

            graphics.lineStyle(1,0x000000,1,true,"nomal","none");

            graphics.drawCircle(_cx, _cy, unscaledWidth/2);

            graphics.endFill();

        }

    }

}

多形状展示图形:

SpringGraph里面有一个Roamer分支

Roamer可以分层次展示,并且可以展示历史节点.功能依然强大,有兴趣的朋友可以试试.

谁有好的制作拓扑的组件可以推荐下,最近正在制作一个流程图,灰常给力..

 

更多内容请访问：小刚的博客

----------------------

天要下雨...