• Flare快速入门

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • DEMO

    • 编辑工具可视化显示关键代码

               public function visualize(_data:Data):void
                {
                    vis=flareVis.visualization;
                    vis.data=_data;
                    vis.bounds = new Rectangle(0, 0, 660, 530);
                    vis.data.nodes.visit(function (param1:NodeSprite) : void              //遍历每一个节点控制其位置随机摆放
                    {
                        param1.x=Math.round(660*Math.random());
                        param1.y=Math.round(530*Math.random());
                        return;
                    }
                    );
                    renderNetwork();                //渲染网络节点

                    addDragListener();            //添加拖拽功能

            
                    lay= new ForceDirectedLayout();                      //采用力引导动态布局
                    lay.defaultSpringTension = 0.004;
                    lay.defaultParticleMass = 1;
                    lay.defaultSpringLength=150;
                    lay.simulation.nbodyForce.gravitation = -10;
                    lay.enforceBounds = true;
                    vis.operators.add(lay);
                    vis.continuousUpdates=true;
                    
                    stopForceTimer=new Timer(2000,1);                //两秒后完成布局,节点位置不再发生变化
                    stopForceTimer.addEventListener(TimerEvent.TIMER,stopForce);
                    stopForceTimer.start();

                    
                    vis.data.edges.visit(function(es:EdgeSprite):void {
                        es.addEventListener(Event.RENDER,updateEdgeLabelPosition);               //重新渲染时,连线上的关系位置也随之发生变化
                    });

                    //为所有节点添加鼠标滑过事件侦听,完成名字全部显示的工程。第一个function鼠标滑入时触发,第二个function鼠标滑出时触发
                    vis.controls.add(new HoverControl(NodeSprite, HoverControl.MOVE_TO_FRONT,

                           function (event:SelectionEvent): void
                          {
                                   (event.node.getChildByName("myLabel") as TextSprite).text=event.node.data.tag;
                          },
                        function(event:SelectionEvent):void
                        {
                            var tagName:String=event.node.data.tag;
                            if(tagName.length>6)
                                tagName=tagName.substr(0,6)+"..";
                            (event.node.getChildByName("myLabel") as TextSprite).text=tagName;
                        }
                        )

                        );
                    
                    vis.update();
                }

                 //渲染节点及连线上的关系
                public function renderNetwork() : void
                {
                    vis.data.nodes.visit(function (param1:NodeSprite) : void
                    {
                        renderNode(param1);
                        addLabel(param1);
                        return;
                    }
                    );
                    vis.data.edges.visit(function(es:EdgeSprite):void
                    {
                        var sp:Sprite=new Sprite();
                        var tx:TextField=new TextField();
                        tx.width=55;
                        tx.height=20;
                        tx.x=-10;
                        tx.name="relation";
                        tx.text=es.data.relationName;
                        sp.addChild(tx);
                        sp.buttonMode=true;
                        sp.mouseChildren=false;
                        sp.addEventListener(MouseEvent.CLICK,labelClicked);
                        sp.name="linesp";
                        sp.x = (es.source.x + es.target.x )/ 2;
                        sp.y = (es.source.y + es.target.y )/ 2;
                        es.addChild(sp);
                        es.arrowType=ArrowType.TRIANGLE;
                        es.arrowHeight=8;
                        es.arrowWidth=8;
                    });
                    return;
                }
                
                private function renderNode(param1:NodeSprite) : void
                {
                    param1.fillColor = 4291572480;
                    vis.marks.setChildIndex(param1, (vis.marks.numChildren - 1));
                    param1.alpha = 1;
                    return;
                }// end function
                
                //为节点添加名称
                private function addLabel(param1:NodeSprite):void
                {
                    var tagName:String=param1.data.tag;
                    if(tagName.length>6)
                        tagName=tagName.substr(0,6)+"..";
                    var t:TextSprite = new TextSprite(tagName);
                    t.x = -10;
                    t.y = 5;
                    t.name = "myLabel";
                    t.textField.setTextFormat(new TextFormat("Arial", 12, 0x474747));
                    param1.addChild(t);
                    param1.mouseChildren=false;
                }

                //更新连线关系的位置
                private function updateEdgeLabelPosition(evt:Event):void {
                    var es:EdgeSprite = evt.target as EdgeSprite;
                    (es.getChildByName("linesp") as Sprite).x = (es.source.x + es.target.x) / 2;        
                    (es.getChildByName("linesp") as Sprite).y = (es.source.y + es.target.y) / 2;
                }

    • Visualization

    Visulization类代表一个可交互数据可视化对象。一个visualization实例包括:

      1.一个Data实例,这个实例包含DataSprite对象,这些对象用于视觉传达每一个data元素

      2.通过operators属性指向的一个OperatorList,主要用来控制位置、颜色、大小和其他属性

      3.通过controls属性指向的一个ControlList完成与可视化数据的交互

      4.一个坐标系实例用来公尺数据可视化

      可视化对象借助visualization的marks属性来完成将其添加到显示列表中,因为数据对象并不是一个显示列表容器。  所有的可视化元素都被包含在layers的Sprite中,这个Sprite包括了坐标,marks以及可选的labels 图层,  如果客户端希望添加额外的图层到visualization中应该直接将它们添加到layers这个sprite中。注意层级关系。  如果希望创建一个新的Visualization,那么首先需要加载数据集,构建一个Data实例,然后通过将这个Data实例传递到  Visualization的构造函数中。然后添加一系列语气的operators到他的operators属性中来定义视觉编码

    • OperatorList

    OperatorList维护一个连续的operators链条,这些operators将会按照顺序一个一个被调用。使用OperatorList的add方法就可以添加Operators到OperatorList了。一个添加后,operators可以被检索以及设置它们在链表中的索引数值可以通过数组下标的方式或者通过getOperatorAt和setOperator这两个方法

    • Operators

    Operators负责内容的可视化处理任务,这些任务具体包括布局、颜色、形状和大小编码。可以通过继承这个类来实现自定义operators

    • Data

    Data数据结构用来管理一系列可视化数据对象,Data类既管理非结构数据也管理图方式的数据或者网络结构,

    维护节点和边的集合。通过DataList实例对data sprites进行管理,单独的data list提供对可视化数据对象的

    访问、操纵、排序以及生成统计数据的方法

    除了必须的节点和边列表外,客户端也可以添加新的自定义lists(例如,为了管理一个特定的数据子集)

    通过使用addGroup方法然后通过group方法来对这些链表。每一个数据groups都可以直接被flare.vis.operator包中的很多visualization operators直接处理

    Data对象维护一组可视DataSprites,他们本身并不是可视化对象的容器。必须通过将Data实例传递到Visualization中

    Visualization才是负责处理DataSprite实例以及将其添加到显示列表中

    当需要做基于树的操作时,data也类负责通过一个图自动化生成树。这是通过实现flare.analytics.graph.SpanningTree 这个operator来完成的

    这个operator可以被作为参数传递给treePolicy,treeEdgeWeight,以及Rootshuxing。此外,客户端可以创建他们自己的生成树

    • DataSprite

    DataSprite是显示对象的基类,这些显示对象代表了可视化数据。DataSprites相比普通的sprite支持一系列可视化属性。这些属性包括针对颜色、形状、大小、极坐标中的位置以及其他

    DataSprite实例最普通的呈现方式是通过使用可插入渲染器来为sprite绘制内容。这些渲染器可以在运行时动态改变,进而动态控制DataSprite的呈现。此外,因为这些是sprites,他们可以在显式列表中任意包含显式对象作为子元素,包括嵌套整个visualizations

    DataSprite提供两个值得注意的附加属性,首先,data属性指向一个对象包含后台将被显式的数据对象。这个数据对象通常是DataSprite视觉所代表的数据记录或元组,它的值通常用来决定视觉编码。第二个,props是一个动态对象,用来为DataSprite实例附加任意的属性之用例如,一些不具算法需要在每个元素的基础上增加额外的参数,同时将这些数值存储在props属性中

    • Encoder

    Encoder   Operators的子类,用来控制颜色、形状和大小等视觉编码。所有编码器都拥有类似的结构:

    一个source属性(如,一个数据字段)映射到一个目标属性(如视觉变量)使用ScaleBinding

    实例实现数值之间的映射,使用Palette实例实现地图缩放输出与视觉变量的映射 例如颜色、形状和大小

    • Palette

    Palette,palettes的基类,例如颜色和大小palettes,实现插入缩放数值和视觉属性之间的映射

    • Shapes

    Shapes,工具类用于定义形状类型以及形状绘制路径。所有形状绘制函数需要两个参数:一个Graphics用于在其上绘制,以及一个size参数决定shape 的半径大小(宽和高都是size属性的两倍大小)

    所有的shapes都用一个名字来标识,这个类将这些名字和绘图功能进行注册,使得可以通过shapes的名字查找shape的渲染路线。例如

    这些名字可能被分配给flare.vis.operator.encoder.ShapeEncoder使用,然后flare.vis.data.render.ShapeRenderer类通过查找这个类的shape进行渲染,

    可用的形状集合可以通过使用静态方法setShape进行扩展,将一个形状的名字和一个绘制函数进行注册。

    • ShapeEncoder

    ShapeEncoder, 用一个数据字段对shape数值进行编码,使用顺序尺度,shape数值是整数指数,这个整数指数会和一个shape Palette进行映射,这个shape palette提供shape的绘制路径。

    • ShapePalette

    ShapePalette 形状的主要颜色值,将整数指数值传递到形状的绘图函数中

    • ShapeRenderer

    ShapeRenderer 绘制形状的渲染器,ShapeRender需要使用ShapePalette实例基于DataSprite的shape属性查找shape的绘制路径

    形状的最终大小是由ShapeRender.defaultSize*DataSprite.size来决定

    • Tree

    Tree 用来管理一组具有树结构的可视化数据对象的数据结构。 这个类扩展了Data类的模型层次结构的功能。

    当数据形成一个严格意义上的树时可以用此结构来代替Data类,或者也可以通过一个一般模型图生成树

    • NodeLinkTreeLayout

    NodeLinkTreeLayout将节点像树一样整洁的层级相连的布局算法。这个算法构建了具有一个根的树,每一深度的节点都处在同一条线上。树的指向同样可以被设置成从左到右(默认),从右到走,从上到下,从下到上

    • FisheyeDistortion

    FisheyeDistortion计算构建一个鱼眼扭曲视图,这种扭曲通过以下方式分配空间:距离布局锚越近的元素获得更多的空间,距离布局锚越远的元素获得越少的空间。在一致的空间里放大距离锚近的空间,缩小远处的空间

    • PropertyEncoder

    PropertyEncoder 对一组视觉元素的属性值进行编码,一个property编码器通过简单的设置一组属性对应的数值

    就可以应用到所有data sprites。一个输入对象确定哪个属性被设置以及该属性被设置为哪个值

    例如,一个PropertEncoder 以如下方式创建:new PropertyEncoder({size:1,lineColor:0xff0000ff});将会

    将size设置为1,线条颜色设置为蓝色,这些将会被应用到该encoder处理的所有data sprites

    属性值可以通过多种方式,和flare.vis.data.DataList.setProperties方法一样:

    如果值是一个函数,它会为每个元素进行评估,结果将作为该元素的属性值。

    如果值是一个IEvaluable实例,如flare.util.Property或flare.query.Expression,它将为每个元素进行评估,结果将作为该元素的属性值。

    在所有其他情况下,属性值将被视为文字以分配给所有元素。

    • ScaleBinding

    ScaleBinding一个实用工具类,用来绑定data属性和描述性的规模,ScaleBinding为数据字段和描述那个数据字段规模提供了一个中间层。创建的规模可以用来布局和数据值编码。当规模参数例如规模类型和值范围更新后,一个潜在的规模实例将会因此而更新或者根据需要创建一个新实例

    • ForceDirectedLayout

    ForceDirectedLayout通过仿真物理中的相互作用力来对节点进行布局,默认情况下,节点互相排斥,连线充当弹簧,同时对其应用拖拽力(类似空气阻力)。该算法可以通过多次迭代运行最后计算出一个布局也可以一直以动画的方式运行下去,以获得一个动态具有交互性的布局(通过将Visualization.continuousUpdates = true)

    这是布局算法的时间复杂度是O(nlogn)和O(E),n代表节点数,E代表边数。其他一些自定义的仿真力也可能会影响到复杂度.

    这个力引导布局通过使用flare.physics包中的物理模拟器来实现。用于驱动此布局的模拟器可以明确设定。通过选择IForce模块,允许创建任意数量的自定义力引导布局。在模拟的布局中的每一个节点都和一个粒子实例进行匹配,每一个边对应一个弹簧力。一旦模拟已初始化,你可以通过node.props.particle和edge.props.spring属性分别对其进行检索

    • Simulation

    Simulation一个物理模拟器,涉及到粒子、弹簧和力。对于模拟常用的物理效果和布局非常有用

    • NBodyForce

    NBodyForce力用来模拟带点粒子的相互作用,例如重力或电荷。该类使用一个四叉树结构计算总电荷并优化计算过程。该里函数是一个标准平方反比(近似优化)F=G*m1*m2/d*d。G是一个固定值(如引力常数),m1和m2是粒子的质量,d代表他们之间的距离

    • OperatorSwitch

    OperatorSwitch  负责维护一个operators链表,但是一次只运行所有operators中的其中一个。一个开关允许不同的operator链在不同的时间执行。Operators可以通过OperatorSwitch的add方法添加到OperatorSwitch上。一旦被加上,operators就可以被检索以及设置它们在链条上的索引了,或者使用数组下标的方式或者使用getOperatorAt和setOperatorAt方法

    子operator的执行有索引属性决定。这个索引可以手动设置或者根据每次调用动态决定,通过为indexFunction属性指派一个自定义函数

    • DragControl

    DragControl交互式控制拖放元素,DragControl使得对一个容器内的所有Sprite都可以通过点击拖拽来进行拖动操作

    • NodeSprite

    NodeSprite一个数据元素的图像化展示,例如数据元组或图形节点。默认情况下,NodeSprites用作绘制使用。NodeSprites通常通过一个Data对象进行管理

    NodeSprites可为一般图形结构(管理出链和入链列表)和数结构(管理一个子链和父指向链表)分别维持邻接链表。图和树链表是完全分开维护的,这样会带来最大限度的灵活性。而树链表经常被用来记录一个普通的网络生成树结构,它们也可以用来表示一个共存的图结构但层级却完全不同,

    当便利此节点上的边缘事件时,你需要考虑到这一点

    • DataSource

    DataSource一个data source提供访问互联网远程数据的功能,DataSource需要一个URL来请求数据文件,以及一个格式字符串来表示数据的格式,当前支持的格式是“Tab”(制表符分割的文件)和“json”。另外,一个DataSource可以获得一个schema对象,这个对象会对数据字段及其类型(int,Number,Date,String等)进行描述。如果没有提供schema,数据转换器会尝试从数据本身的进行数据类型的推断。

    一旦DataSource被创建,就可以使用load方法启动数据加载了。此方法返回一个URLLoader实例。添加监听到URLLoader的COMPLETE事件,当加载和解析都已成功会就会触发该事件。当一个COMPLETE事件发出后,URLLoader的data属性就包含了已加载和解析的数据集了

    • Labeller

    Labeler用来为visualization的每个元素添加labels。默认情况下,这个operator会将标签添加到每个data sprite的中间位置;当然你可以通过配置offset和anchor属性来控制其位置

    Labellers支持两种不同的添加标签方式:CHILD模式(默认)和LAYER模式

    在CHILD模式下,labels作为DataSprite实例的子元素被添加进来,因而构成了data sprite的一部分。在这种模式下,labels会随着sprite位置的改变而动态调整其位置

    在LAYER模式下,labels会被添加到visualizaiton的一个单独的图层上,这个图层的位置处于Visiualization.marks图层(包含data sprites的图层)之上,一个新图层会在需要时被创建,并且通过Visualizaiton.labels属性进行访问。如果需要确保没有标签会被data.marks所阻塞的这种模式是非常有用的,标签不会随着DataSprite实例移动而重新定位,相反,labeler必须重新运行,以保持当前的布局。

    通过DataSprite的props.label属性就可以访问已创建的labels,如果希望用不同的属性名来存储labels的话,请自己为这个类的访问属性设置希望的名字

    • ExpandControl

    通过单击图或树的节点提供展开和折叠的交互控制功能。这个控制器只有当被应用到Visualization实例时才会发挥作用

    • 标签:
    • 进行
    • flare
    • 属性
    • 数据
    • 对象
    • data
    • 实例
    • 布局
    • 节点
    • 元素
    • function
  • 加入的知识群:
    学习元评论 (0条)

    评论为空
    聪明如你,不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论
      
暂无内容~~
顶部