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”.

Layout: Create an Operator subclass call “PerformanceTreeLayout” to layout nodes and edges. Register with the Visualization list of operators

Renderer Create an EmployeeRenderer class to render the NodeSprite UI for each employee. Register with the DataList as a node renderer

Operator: Create a Operator subclass called “StarRatingOperator”; which will create, position, and initialize “performance rating” stars for each employee NodeSprite. Register with the Visualization

Renderer: Create StarRatingRenderer class to render the “star” sprites; use with a Factory pattern to instantiate

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

?

?

?

轉載于:https://www.cnblogs.com/avenxia/archive/2012/06/10/2544160.html

總結

以上是生活随笔為你收集整理的flex画拓扑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。