flex做的可动态更新的拓扑图

直接上效果图

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
creationComplete="init()" fontSize="12" backgroundColor="#FFFFFF" 
layout="horizontal" minWidth="955" minHeight="600" xmlns:s="library://ns.adobe.com/flex/spark" horizontalAlign="center" verticalAlign="middle" xmlns:services="services.*"> 
<mx:Panel id="panelpp" width="1218" height="546" layout="absolute" title="资金流分析图" x="-23" y="26"> 
<mx:DataGrid id="dataG" x="10" y="38" height="465" doubleClickEnabled="true" doubleClick="dataG_doubleClickHandler(event)"> 
<mx:columns> 
<mx:DataGridColumn headerText="资金源" dataField="label"/> 
</mx:columns> 
</mx:DataGrid> 
<mx:ComboBox id="dataC" x="10" y="10" editable="true" width="102" dataProvider="{peopleArr1}"></mx:ComboBox> 
<mx:Canvas id="cans" x="111" y="24" width="945" height="479" horizontalScrollPolicy="off" verticalScrollPolicy="off" textAlign="center"> 
</mx:Canvas> 
<s:Button id="selectBtn" x="120" y="5" label="查询" click="selectBtn_clickHandler(event)"/> 
<!--<s:Button x="199" y="5" label="线条变色" click="button1_clickHandler(event)"/>--> 
</mx:Panel> 
<mx:Script> 
<![CDATA[ 
import com.adobe.serialization.json.JSON; 
import mx.collections.ArrayCollection; 
import mx.controls.Alert; 
import mx.rpc.events.ResultEvent; 
private var point:Point; 
private var line:LinkLine; 
private var map:LinkMap; 
private var pointArr:ArrayCollection; 
private var lineArr:ArrayCollection; 
private var mapArr:ArrayCollection; 
[Bindable] 
private var peopleArr:ArrayCollection; 
[Bindable] 
private var relationArr:ArrayCollection; 
[Bindable] 
private var peopleArr1:ArrayCollection; 
private var colorArr:Array=["0xFF00FF","0xFF0000","0xf03455","0x00FF00","00ff34ff","99121212","12232323","32343434","00454545","67676767","90878700"]; 
private var k:int=0; 
private var i:int; 
private var j:int; 
public var a:int; 
public var c:int; 
private var idbegin:String="1000"; 

// 页面加载即启动 
private function init():void{ 
addEventListener(DoubleImageEvent.MYEVENT,handle); 
peopleArr1=new ArrayCollection([ 
{"id":"1000","idx":"0","idy":"0","label":"张1000"},{"id":"1001","idx":"1","label":"张2"},{"id":"1002","idy":"1","label":"张3"},{"id":"1003","idx":"2","label":"张4"},{"id":"1004","label":"张5"},{"id":"1005","idx":"3","label":"张6"} 
]); 
serviceInvoke(); 
} 

private function serviceInvoke():void{ 
getNewArrResult.token = userRefresh.getNewArr(idbegin); 
getNewRelationResult.token = userRefresh.getNewRelation(idbegin); 
} 
protected function selectBtn_clickHandler(event:MouseEvent):void 
{ 

idbegin=this.dataC.selectedItem.id; 
this.cans.removeAllChildren(); 
serviceInvoke(); 

} 
// 布局 
protected function getNewArrResult_resultHandler(event:ResultEvent):void 
{ 

var rawArray:Array; 
var rawData:String = event.result as String; 
rawArray = JSON.decode(rawData) as Array; 
peopleArr = new ArrayCollection(rawArray); 
this.dataG.dataProvider=peopleArr; 
peopleArr.refresh(); 
getMap(); 
} 
private function getMap():void{ 
pointArr=new ArrayCollection(); 
a=peopleArr.length; 
// 固定节点位置 
for(i=0;i<a;i++){ 
var x1:int=160*(int(peopleArr[i].idx)+0.5); 
var y1:int=80*(int(peopleArr[i].idy)+0.5); 
point=new Point(x1,y1); 
// 点集合 
pointArr.addItem(point); 
} 
//Alert.show(pointArr.length+""); 
// 画节点 
mapArr=new ArrayCollection(); 
lineArr=new ArrayCollection(); 
for(i=0;i<a;i++){ 
map=new LinkMap(pointArr[i],100,80,peopleArr[i].label.toString(),peopleArr[i].id.toString()); 
// 图形节点集合 
mapArr.addItem(map); 
this.cans.addChild(mapArr[i]); 
} 
} 
// 线 
protected function getNewRelationResult_resultHandler(event:ResultEvent):void 
{ 

var rawArray:Array; 
var rawData:String = event.result as String; 
rawArray = JSON.decode(rawData) as Array; 
relationArr = new ArrayCollection(rawArray); 
getLine(); 
} 
private function getLine():void{ 
c=relationArr.length; 
for(i=0;i<c;i++){ 
var b:int; 
var e:int; 
for(j=0;j<peopleArr.length;j++){ 
if(relationArr[i].id1.toString()==peopleArr[j].id.toString()){ 
b=j; 
} 
} 
for(j=0;j<peopleArr.length;j++){ 
if(relationArr[i].id2.toString()==peopleArr[j].id.toString()){ 
e=j; 
} 
} 
line=new LinkLine(); 

lineArr.addItem(line); 
line.setStartPoint(new Point(mapArr[b].getCenterX(),mapArr[b].getCenterY())); 
line.setEndPoint(new Point(mapArr[e].getCenterX(),mapArr[e].getCenterY())); 
mapArr[b].setLine(line,true); 
mapArr[e].setLine(line,false); 
line.setTip(relationArr[i].data); 
this.cans.addChild(line); 
} 

} 
//线条颜色控制 
/* protected function button1_clickHandler(event:MouseEvent):void 
{ 

for(i=0;i<c;i++){ 
lineArr[i].setLineColor(colorArr[k]); 
lineArr[i].drawLine(); 
k++; 
if(k>=colorArr.length) 
k=0; 
} 
} */ 



// 双击列表刷新dataGrid 
protected function dataG_doubleClickHandler(event:MouseEvent):void 
{ 
idbegin=dataG.selectedItem.id; 
this.cans.removeAllChildren(); 
serviceInvoke(); 
} 

// 点击图片刷新数据 
private function handle(e:DoubleImageEvent):void{ 
idbegin=e.getId(); 
this.cans.removeAllChildren(); 
serviceInvoke(); 
} 
]]> 
</mx:Script> 
<mx:CallResponder id="getNewRelationResult" result="getNewRelationResult_resultHandler(event)"/> 
<services:UserRefresh id="userRefresh" fault="Alert.show(event.fault.faultString + 'n' + event.fault.faultDetail)" showBusyCursor="true"/> 
<mx:CallResponder id="getNewArrResult" result="getNewArrResult_resultHandler(event)"/> 
<mx:CallResponder id="getPeopleArrsResult"/> 
</mx:Application> 

?图1是程序加载的默认图，图2是以张三为源的关系图，可以双击张3的dataGrid列表或者图标都可以实现自动更新图片以及他们的拓扑关系！ 我给出全部代码给大家分享，下面是部分的mxml的主应用程序中的代码，看看是不是大家要的，想要完整代码可以直接下载附件！ 附件项目部署说明：第一个和第二个压缩文件分别是flex和java端的项目写的已经很清楚了，只要有这两个源文件，java端部署tomcat，flex端服务器配置好，效果就可以出来！ 若果不会配想看效果，就要用到第三个压缩文件了，把此文件解压后放到tomcat?? webapps文件夹下，启动tomcat，把flex端代码的服务器配置路径配置到刚才粘贴的文件上， 最后打开运行项目主程序，效果出来了，祝你好运！ 第一次发自己的成果，不足之处多包涵，希望和大家一起讨论技术，共同进步！