用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就是上文写的到那段xmlprivate 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 filespublic 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>
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 XMLvar 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 automaticallyvar 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可以分层次展示,并且可以展示历史节点.功能依然强大,有兴趣的朋友可以试试.
谁有好的制作拓扑的组件可以推荐下,最近正在制作一个流程图,灰常给力..
http://www.cnblogs.com/xiaogangqq123/archive/2011/04/22/2025068.html
用SpringGraph制作拓扑图和关系图相关推荐
- python代码电影人物关系_Python基于network模块制作电影人物关系图
Python基于network模块制作电影人物关系图,节点,值为,模块,关系,算法 Python基于network模块制作电影人物关系图 易采站长站,站长之家为您整理了Python基于network模 ...
- vue使用svg画拓扑图(关系图) 拖拽 缩放
概述 项目刚开始用的echarts画的拓扑图,echarts有个关系图可以直接画出来,但是上个前端在拖拽功能上留了bug,我眼睛都快看瞎了,都没找出来哪里出问题,还找了各种文章借鉴学习都没搞定 后来跑 ...
- tableau应用实战案例(三)-如何用Tableau制作网络关系图
前言 唯一的一点点难度就在数据集的制作上,需要自己制作JSON文件,我用最简单的例子介绍: 数据生成网站: https://observablehq.com/@ladataviz/network-da ...
- python关系图谱_文本分析之制作网络关系图
最近忙于学术,公众号更新的有点慢了,在这里给大家个歉,希望大家能继续支持我.由于学术需要,未来一段时间,我以后会有一些文本分析的脚本要出现,希望大家喜欢. 目前简单的文本分析已经满足我人物需要,所以还 ...
- python绘制社会关系网络图_文本分析之制作网络关系图——Python
今天给大家带来我一个脚本,用来分析社会网络关系. 这个图我没有用到gephi或者其他的工具,是我用python纯脚本运行出来的.简单的实现了封装,大家有兴趣可以下载下脚本,运行下. 原理知识 我就简单 ...
- 用pyecharts制作小说《剑来》的人物关系图(粗)
先上效果 今天在一如既往地划水时,水友给我推了个小说叫<剑来>.下班回到家,准备下载了看一下,结果一看,光txt都要9MB,以我磨蹭的速度,怕不是明年都看不完.正好最近在做一些NLP相关的 ...
- Tableau制作人物关系图
人物关系图可以清晰表示人物之间的关联关系,通过这种关系的呈现给人直观印象,能够达到总览人物故事的全貌,一起看下这个人物关系图是怎样制作的吧. 在绘制人物关系图之前我们需要设计人物关系图,看似杂乱无章的 ...
- tableau如何生成HTML文件,用Tableau快速制作网络关系图
我以前写过一篇文章 <用Tableau制作网络关系图>,里面提到了Tableau本身不支持自动生成网络关系图,需要借助其他软件.提供Voronoi Treemap制作方法的Tristan ...
- Python数据可视化 Pyecharts 制作 Graph 关系图
大家好,我是Mr数据杨.今天我们要聊聊的是Python中的关系图模块,就像三国演义中的繁复人物关系网一样. 来看看这个"基本设置"部分.比如要描述刘备与关羽.张飞的结义兄弟之情,那 ...
最新文章
- Linux 有问必答:如何在Ubuntu或者Debian中启动后进入命令行
- LeetCode Path Sum III(前缀和)
- python字符串中find函数_Python之字符串常用花哨玩法
- zeromq php,在Apache内部的PHP脚本中使用ZeroMQ
- JavaScript --- 跨浏览器的事件处理程序
- Ubuntu16.04通过GPT挂载硬盘
- Gratipay如何帮助解决“搭便车”问题
- Windows和VMware下ubuntu切换界面的快捷键
- Pytorch:Tensor和Numpy
- java数组长度最大值,javase-获取数组最大值
- Spark 任务参数配置
- 岚宝科技PM2.5传感器驱动程序
- AgentWeb嵌套h5 上传图片文件
- centos7 小图标_Centos7 桌面图标设置
- 笔记本双显卡,NVIDA驱动,Manjaro 双屏
- 开利完成对广东积微集团的收购; 正威国际与中润超油建设全球最大规模的石墨烯润滑材料生产基地和研发中心 | 能动...
- SDH与SONET(整理)
- ios开发面试常见问题及答案
- 谷歌浏览器 Google Chrome v74.0.3729.131 正式版
- 用 Pinbox 轻松收藏代码,这就是我要的收藏工具
热门文章
- sql server死锁_如何报告SQL Server死锁事件
- sql server作业_在SQL Server中报告作业失败并发出警报
- SQL Server中的基数估计角色
- azure 导入 bak_使用Azure Data StudioSQL Server数据导入
- 2019-04-17 PowerShell基本语法
- 【quickhybrid】H5和原生的职责划分
- .NET实现对服务器端目录下PDF文件的预览
- android 短信位置,浅析Android手机卫士之手机实现短信指令获取位置
- javascript实用代码大全
- web中“/”写在不同地方时的值不同