1. 首页
  2. 文章中心
  3. ui

用SpringGraph制作拓扑图和关系图

140 阅读 0 评论
我是靠谱客的博主 光亮柚子，这篇文章主要介绍用SpringGraph制作拓扑图和关系图，现在分享给大家，希望可以做个参考。

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

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

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

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

spring

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

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

复制代码
1
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代码

复制代码
1
<flex:SpringGraph id="springgraph" bottom="0" top="0" right="0" left="0" backgroundColor="#ffffff"
复制代码
1
motionThreshold="1.5"  repulsionFactor="0.60" dataProvider="{graph}" autoFit="true"  itemRenderer="AtomView">
复制代码
1
<fx:Script>
复制代码
1
[Bindable]
复制代码
1
public var graph: Graph = new Graph();
复制代码
1
 
复制代码
1
//strXML就是上文写的到那段xml
复制代码
1
private function gotData(strXml:String): void {
复制代码
1
//ShowLoding();
复制代码
1
graph.empty();
复制代码
1
// 获得xml数据
复制代码
1
var x:XML = new XML(strXml);
复制代码
1
loadCML(x, graph);
复制代码
1
}
复制代码
1
复制代码
1
// This namespace is used in some, but not all, CML files
复制代码
1
public static var cmlns:Namespace = new Namespace("x-schema:cml_schema_ie_02.xml");
复制代码
1
复制代码
1
private static function loadCML(cml: XML, g: Graph): void {
复制代码
1
var gid: String = cml.@id;
复制代码
1
var item: Item;
复制代码
1
for each (var node: XML in cml..Node) {
复制代码
1
item = new Item(gid + node.@id);
复制代码
1
item.data = node;
复制代码
1
g.add(item);
复制代码
1
}
复制代码
1
复制代码
1
for each (node in cml..cmlns::Node) {
复制代码
1
item = new Item(gid + node.@id);
复制代码
1
item.data = node;
复制代码
1
g.add(item);
复制代码
1
}
复制代码
1
复制代码
1
for each (var bond: XML in cml..Edge) {
复制代码
1
loadBond(bond, g, gid);
复制代码
1
}
复制代码
1
复制代码
1
for each (bond in cml..cmlns::Edge) {
复制代码
1
loadBond(bond, g, gid);
复制代码
1
}
复制代码
1
}
复制代码
1
复制代码
1
private static function loadBond(bond: XML, g: Graph, gid: String): void {
复制代码
1
var fromID: String;
复制代码
1
var toID: String;
复制代码
1
var orderString: String;
复制代码
1
var infoString:String;
复制代码
1
var colorString:String;
复制代码
1
复制代码
1
try {
复制代码
1
fromID = bond.@fromID;
复制代码
1
toID = bond.@toID;
复制代码
1
orderString = bond.@order;
复制代码
1
infoString = bond.@number;
复制代码
1
colorString = bond.@color;
复制代码
1
} catch (e: Error) {
复制代码
1
}
复制代码
1
复制代码
1
var fromItem: Item = g.find(gid + fromID);
复制代码
1
var toItem: Item = g.find(gid + toID);
复制代码
1
复制代码
1
if((fromItem != null) && (toItem != null)) {
复制代码
1
var order: int = int(orderString.toString());
复制代码
1
var data: Object = {settings: {alpha: 0.2 , color: colorString, tooltip: "测试数据",info:infoString, thickness: order}};
复制代码
1
g.link(fromItem, toItem, data);
复制代码
1
}
复制代码
1
复制代码
1
}
复制代码
1
</fx:Script>
注意这句话:
var data: Object = {settings:{alpha:0.2,color:colorString,tooltip:”测试数据",info:infoString,thickness: order}};
这句话是设置连接先的样式.

itemRenderer="AtomView"

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

AtomView.mxml代码:

复制代码
1
<Circle id="circle" doubleClick="createPopUp(data.data.@pid)"/>
复制代码
1
<mx:Label id="lab"  doubleClick="createPopUp(data.data.@pid)"/>
复制代码
1
<mx:Style source="index.css"/>
复制代码
1
scaleX="{Main.getInstance().scaleFactor}"
复制代码
1
scaleY="{Main.getInstance().scaleFactor}" -->
复制代码
1
<mx:Script>
复制代码
1
<![CDATA[
复制代码
1
import com.adobe.flex.extras.controls.springgraph.Item;
复制代码
1
复制代码
1
import mx.containers.ControlBar;
复制代码
1
import mx.containers.Panel;
复制代码
1
import mx.containers.VBox;
复制代码
1
import mx.controls.Alert;
复制代码
1
import mx.controls.Button;
复制代码
1
import mx.controls.Label;
复制代码
1
import mx.controls.List;
复制代码
1
import mx.controls.Spacer;
复制代码
1
import mx.controls.TextInput;
复制代码
1
import mx.graphics.SolidColor;
复制代码
1
import mx.graphics.SolidColorStroke;
复制代码
1
import mx.graphics.Stroke;
复制代码
1
import mx.managers.PopUpManager;
复制代码
1
复制代码
1
复制代码
1
/**    项数据 **/
复制代码
1
private var _data: Item;
复制代码
1
复制代码
1
/** 是否创建完成 */
复制代码
1
private var created: Boolean = false;
复制代码
1
复制代码
1
override public function set data(d: Object): void {
复制代码
1
super.data = d;
复制代码
1
_data = d as Item;
复制代码
1
复制代码
1
if(created)
复制代码
1
applyData();
复制代码
1
}
复制代码
1
复制代码
1
/** called when this component and its child components are fully created. */
复制代码
1
private function creationComplete(): void {
复制代码
1
created = true;
复制代码
1
if(_data != null)
复制代码
1
applyData();
复制代码
1
}
复制代码
1
复制代码
1
/** updates our view to represent the current Item, which is some kind of atom. */
复制代码
1
private function applyData(): void {
复制代码
1
var name: String = getAtomName(_data.data as XML);
复制代码
1
var _color: int;
复制代码
1
var dataXML:XML = _data.data as XML
复制代码
1
var colorInt:int = int(dataXML.@color);
复制代码
1
// this atom type is not in the 'atomColors' table. use a default.
复制代码
1
_color = colorInt;
复制代码
1
// determine the size. To a first approximation, all atoms are roughly the
复制代码
1
// same size. See http://www.historyoftheuniverse.com/atomsize.html.
复制代码
1
var labelX: int = 30;
复制代码
1
var labelY: int = 50; // TODO: figure out how to do vertical centering automatically
复制代码
1
var size: int = 60;
复制代码
1
复制代码
1
this.width = 62;
复制代码
1
this.height = 62;
复制代码
1
circle.color = _color;
复制代码
1
circle.width = size;
复制代码
1
circle.height = size;
复制代码
1
circle.cx = 30;
复制代码
1
circle.cy = 30;
复制代码
1
circle.doubleClickEnabled = true;
复制代码
1
复制代码
1
var order:int = int(dataXML.@order);
复制代码
1
复制代码
1
lab.width = 120;
复制代码
1
lab.x = 5;//labelX;
复制代码
1
lab.y = 20;//labelY;
复制代码
1
lab.text = name;
复制代码
1
lab.doubleClickEnabled = true;
复制代码
1
lab.toolTip = lab.text + "n" + dataXML.@number;
复制代码
1
复制代码
1
size = 60+order*5;
复制代码
1
circle.cx = 30+order*5;
复制代码
1
circle.cy = 30+order*5;
复制代码
1
this.width = 62+order*10;
复制代码
1
this.height = 62+order*10;
复制代码
1
circle.width = size+order*5;
复制代码
1
circle.height = size+order*5;
复制代码
1
复制代码
1
lab.y = 20+order*5;
复制代码
1
复制代码
1
复制代码
1
}
复制代码
1
复制代码
1
/** 获得元素名称 */
复制代码
1
private function getAtomName(atomXML: XML): String {
复制代码
1
var name: String = String(atomXML.@prop);
复制代码
1
if((name == null) || (name.length == 0)) {
复制代码
1
// We didn't' find a name. Try again using a namespace.
复制代码
1
var ns: Namespace = Main.cmlns;
复制代码
1
name = atomXML.ns::string; // .(@builtin == "elementType");
复制代码
1
// TODO: the above XML expression works, but isn't the right expression. fix it.
复制代码
1
}
复制代码
1
return name;
复制代码
1
}
复制代码
1
</mx:Script>

Circle是一个自定义圆的UIComponent

Circle代码

复制代码
1
 
复制代码
1
package
复制代码
1
{
复制代码
1
import flash.display.GradientType;
复制代码
1
import flash.display.InterpolationMethod;
复制代码
1
import flash.display.SpreadMethod;
复制代码
1
import flash.geom.Matrix;
复制代码
1
复制代码
1
import mx.core.UIComponent;
复制代码
1
import mx.effects.Rotate;
复制代码
1
 
复制代码
1
/** A UIComponent that is simply a colored circle.
复制代码
1
     *
复制代码
1
     * @author Mark Shepherd
复制代码
1
     */
复制代码
1
public class Circle extends UIComponent
复制代码
1
{
复制代码
1
private var _cx:int;
复制代码
1
private var _cy:int;
复制代码
1
public function set cx(i: int): void {
复制代码
1
_cx = i;
复制代码
1
}
复制代码
1
public function set cy(i: int): void {
复制代码
1
_cy = i;
复制代码
1
}
复制代码
1
/** the color that this circle will be */
复制代码
1
public function set color(i: int): void {
复制代码
1
_color = i;
复制代码
1
invalidateDisplayList();
复制代码
1
}
复制代码
1
复制代码
1
/** our current color setting. */
复制代码
1
private var _color: int;
复制代码
1
复制代码
1
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
复制代码
1
graphics.clear();
复制代码
1
graphics.beginFill(_color,0.4);
复制代码
1
graphics.lineStyle(1,0x000000,1,true,"nomal","none");
复制代码
1
graphics.drawCircle(_cx, _cy, unscaledWidth/2);
复制代码
1
graphics.endFill();
复制代码
1
}
复制代码
1
}
复制代码
1
}

多形状展示图形:

spring

SpringGraph里面有一个Roamer分支

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

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

 

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

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

天要下雨...

转载于:https://www.cnblogs.com/xiaogangqq123/archive/2011/04/22/2025068.html

最后

以上就是光亮柚子最近收集整理的关于用SpringGraph制作拓扑图和关系图的全部内容，更多相关用SpringGraph制作拓扑图和关系图内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(93)

相关文章

【zabbix】部署nfsen监控netflow'peer1' => { 'port' => '9996', 'IP' => '172.16.17.18' },'peer2' => { 'port' => '9996', 'IP' => '172.16.17.19' },if ( scalar @out != 2 ) {die
【zabbix】部署nfsen监控netflow'peer1' => { 'port' => '9996', 'IP' => '172.16.17.18' },'peer2' => { 'port' => '9996', 'IP' => '172.16.17.19' },if ( scalar @out != 2 ) {die "Error getting nfdump version";}
nfsen、nfdump
nfsen、nfdump
[ Office 365 开发系列 ] Graph Service
[ Office 365 开发系列 ] Graph Service
netflow流量分析工具 linux,Linux安装Nfdump和Nfsen图形界面分析netflow数据
netflow流量分析工具 linux,Linux安装Nfdump和Nfsen图形界面分析netflow数据
用SpringGraph制作拓扑图和关系图
用SpringGraph制作拓扑图和关系图
Nfsen安装
Nfsen安装
Node.Js基础知识
Node.Js基础知识
React Native系列之Native Modules
React Native系列之Native Modules

评论列表共有 0 条评论

立即
投稿
返回
顶部