用SpringGraph制作拓扑图和关系图

电玩女神 2022-09-19 01:59 196阅读 0赞

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

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

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

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

[![spring][]][spring 1]

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

首先引入组件这个不用说,将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();
> 
>     }
> 
>     }
> 
>     }

多形状展示图形:

> [![spring][spring 2]][spring_spring 2]

SpringGraph里面有一个Roamer分支

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

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

[http://www.cnblogs.com/xiaogangqq123/archive/2011/04/22/2025068.html][http_www.cnblogs.com_xiaogangqq123_archive_2011_04_22_2025068.html]

[spring]: http://www.flatws.cn/d/file/article/program/css/2011-06-06/4973d4e0ca9d9934d1c749559583942d.jpg
[spring 1]: http://images.cnblogs.com/cnblogs_com/xiaogangqq123/201104/201104221645086079.jpg
[spring 2]: http://www.flatws.cn/d/file/article/program/css/2011-06-06/465c6a150c2f16628444ef757ef6539e.jpg
[spring_spring 2]: /images/20220828/d667849d7a5847eca4ce223814520add.png
[http_www.cnblogs.com_xiaogangqq123_archive_2011_04_22_2025068.html]: http://www.cnblogs.com/xiaogangqq123/archive/2011/04/22/2025068.html