Birdeye — Flex Component
最近一直在使用Flex技术展示数据关系。使用的是Flex开源组件Birdeye中的关系型图表(Ravis),制作graph visualization。
在使用过程中逐渐了解了Flex,这是一种使用编程的形式来制作一些动画效果的方法。比较适合我这种对flash构图能力有限,但能写写代码的用户。
因为Birdeye是开源的,可以修改源代码满足应用需求的需要。使用过程中总结出一下几点:
1. 中文支持
源代码中的例子中,默认情况下输入中文是不显示的。原因是Ravis的例子中的内嵌了字体库MyriadWebPro.ttf和
MyriadWebPro-Bold.ttf,并通过style/main.css文件将这个字体库构造字体作为工程的默认字体,但是这个库没有包含中文
字体。
网上有方法描述如何使用包含中文字体的字库作为默认字体库,参考如下
http://kevincao.com/2009/06/font-converter-update/
http://kevincao.com/2009/06/flash-font-4/
内嵌中文字体的最大问题是生成swf文件非常大,内嵌入网页很不合适。
现在的解决方法是,去掉字体的设置。不清楚后面的原理,猜测是使用系统自带的字体,估计在一些非中文操作系统上是不能显示中文的,但那有怎样呢,呵呵。
2. 可视点的设定
考虑到性能的原因,Birdeye ravis中默认设置是部分显示graph的顶点。可以通过设置VisualGrap的属性来调整:
maxVisibleDistance:int
Limit the currently visible nodes to
those in a limited distance (in terms of degrees of separation) from
the current root node. If showHistory is enabled, the previous root
nodes will be shown regardless of this limit.
visibilityLimitActive:Boolean
Specifies if any visibility limits should
be active or not. If not active, always all nodes are visible. If
you have many nodes, this could have a severe impact on your
performance so handle with care.
This property can be used as the source for data binding.
3. Xml输入文件中包含html格式文本来控制显示
使用<![CDATA[ 需要处理的内容]]>方式来包含html格式的内容作为xml节点的内容,而不是作为节点的属性,这样可以避免一些xml的编码问题和xml解析错误。
4. 控制graph顶点的双击效果
默认情况下,双击顶点后将以被双击的顶点为root,调用layouter算法重新布局。可以在VisualGraph中将此功能注释掉。
5. 顶点和边的标签都可以重新render ,顶点的绘制可以在primitive中重新设定
edgeLabelRenderer:IFactory
Allow to provide an EdgeLabelRenderer in order to display edge labels. The created instances must be UIComponents.
itemRenderer:IFactory
Allow the provision of an ItemRenderer
(which is more precisely an IFactory). This is important to allow
the Drawing of the items in a customised way. Note that any
ItemRenderer will have to be a UIComponent.
然后使用vgraph.XxxRenderer = new ClassFactory(XxxRenderer);注入VisualGraph。
6. 边的绘制
IEdgeRenderer
Allow the provision of an EdgeRenderer to
allow drawing of edges in a customised way. The edgeRenderer has to
implement the IEdgeRenderer interface.
Ravis中提供了几种边的绘制类,也可以自己编写类似的构造边的类。
分享到:
相关推荐
学习flex birdeye的非常好的实例,可以通过api和实例对brideye 有更进一步的了解,非常有助于学习
资源分类:Python库 所属语言:Python 资源全名:carla_birdeye_view-1.0.1.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
google code birdeye 用flex 绘制地图 一网络拓扑图
birdeye是基于flex的拓扑图,该压缩包包含swc和使用demo
谷歌出的拓扑图软件,这是单独的swc包,共2个文件
无论您如何运行或编辑代码,都可以使用birdeye。 只需pip install birdseye @eye如上所示添加@eye装饰器,按自己喜欢的方式运行函数,然后在浏览器中查看结果。 它还以提供更流畅的体验。 而不是单步执行,而是在...
主要是branch中的birdeye。 这里是源代码,但需要借助另外的开源框架Degrafa。我用的是Degrafaflex4.swf。 这里我直接将degrafaflex4.swf和birdeye本身自己写的vis打成一个swf文件。即birdeyelib.swf。 做图形报表...
拓扑图birdEye改造代码
用Flex基于birdeye开发的雷达图示例,数据是模拟生成的。
2.搜索功能支持ie6.0+ //设置Theodolite$setPoint var cpointtmp = new CPoint(this.holder.offsetLeft + evt.clientX - this.mvl.offsetLeft, this.mvl.offsetTop + evt.clientY - this.mvl.offsetTop); ...