flex画拓扑

FVT

基本的图表到复杂的交互图形和拓扑，提供数据管理、可是编码、动画、交互

 

Analytics：operators，为了计算和统计data

Animate：创建动画的工具

Data：存储数据的模型

Display：继承flash.display

Flex：包装类，可以作为flex组件

Physics：物理效果和力导引布局

Query：query processor

Scale：

Util：常用功能

Vis：可视化工具和operators

 

应用步骤：

首先，用Data和dataset定义数据关系和结构

2、用sprite可视化每个数据元素

用renderer来渲染

用layout来组织拓扑

用operator来操纵每一个元素

用transitioner来可视化变化

用control允许用户与元素交互

用visualization作为所有元素的容器

 

数据可视化：用DataSprite来展示每个数据，datasprite有个data属性，包括了要展示的元素。Data也可以管理数据，而且他的nodes edges属性可以返回data中包含的nodes edges内容。Nodes edges都有visit方法，还有setproperty setproperties方法。这俩方法接受transitioner作为参数。

 

可视化组建继承了datasprite类，这个类中有color shape size等属性。Nodesprite edgesprite继承了datasprite用来表示点和边。

 

之后可以用实现了Irenderer的类作为渲染器，传递给nodes.setproperties方法来渲染。

 

Operators用来操作单个元素。比如layout

Operator可以：改变datasprite元素值；新建、添加、删除节点；用transitioner来完成效果

 

Transitioner用来动画显示变化。如果用transitioner.default则立刻变化，否则按照指定时间段变化。Transitioner有个有趣的操作符$，比如$(node).x

 

Visualization类用来表示一个可视化界面，首先要定义数据集，把数据集加入vis，定义operator来决定怎样显示数据元素。Vis.updata用来刷新可视化界面

 

Flare两点：可以创建并行/串行的显示效果

Consider the scenario where a visualization shows employees, managers, and departments in an indent-tree topology.

l         Visualization: Create a FlareVisualization subclass called “EmployeePerformances”.

1. Layout: Create an Operator subclass call “PerformanceTreeLayout” to layout nodes and edges. Register with the Visualization list of operators
2. Renderer Create an EmployeeRenderer class to render the NodeSprite UI for each employee. Register with the DataList as a node renderer
3. Operator: Create a Operator subclass called “StarRatingOperator”; which will create, position, and initialize “performance rating” stars for each employee NodeSprite. Register with the Visualization
4. Renderer: Create StarRatingRenderer class to render the “star” sprites; use with a Factory pattern to instantiate
5. Control: Create a Control subclass called StarRatingToolTip which will show the details of an employee’s performance ratings in a custom tooltip. Register with the Visualization

 

 

 

ExpandControl用来展缩graph或tree。

Data.nodes.setProperty为DataList中的元素设置属性，比如长宽高、renderer

_filter      _group
filter:* (default = null) — a Boolean-valued filter function indicating which items should trigger hover processing

由Array构建数据集Data：

 

对数据集整形：

 

VisibilityFilter用来控制元素的显示与否

 

Visualization也是继承Sprite的~

_vis.data.nodes是个DATALIST，其中的元素类型都是NODESPRITE

_vis.data是个DATALIST,其中元素师NODESPRITE或egedsprite

 

 

对data的操作：创建data、为DataList设置属性（长宽高renderer）、sort、加入一个vis

 

Vis做的事情：添加operator（Layout、PropertyEncoder）；添加control（HoverControl、ExpandControl或DragControl）

换时做的事情：清除Operators；添加operator（Layout、PropertyEncoder）；改变HoverControl策略，清除 ExpandControl或DragControl，添加ExpandControl或DragControl

 

 

 

 

Own：

1、创建data

2、创建vis；添加control(TooltipCtrl、HoverContrl、ExpandContrl);添加operator(Layout);给data setProperties（长宽高renderer）

3、vis.update；vis加入面板

4、创建Button,并添加CLICK事件（改变vis的operator的Layout或者分类别显示）

5、为vis面板添加PanZoomControl

 

 

 

 

App：

1、创建data；Sort；设置Data的property

2、创建vis；分配operator（VisibilityFilter、Layout、Labeler、Encoder）

3、vis.update；vis加入当前面板

4、分配controls（HoverControl、ClickControl、TooltipControl）

5、为其他add Controls（创建title、创建searchBox并加入listener、创建genderLegend并attach一个HoverControl，一个ClickControl）

6、给vis title search gender设置位置

 

问题：

1、  位置怎么保存呢？不要保存了吧？成不？

2、  自定义的数据结构 去看NodeSprite EdgeSprite 组成的Data

3、  删除增加

 

Operator和control的区别是？

 

Control是在创建时就注册监听器，然后在事件处理里执行功能

Operator是在vis的update时执行operate()函数来执行功能

 

 

Data中nodes和edges的联系是通过label联系起来的。

g:Data; g.addEdgeFor(r,n);其中r n均为Data中的NodeSprite

要有r.data.label