Flare | Data Visualization For The Web

由柏拉图重新发布

关注： 0

Flare使创建交互式数据可视化变得容易

要开始制作自己的可视化效果，下载flare 并完成下面的教程。需要更多帮助吗？造访帮助论坛（您需要一个 SourceForge上登录以发布信息）。

Flare是根据BSD许可发布的开源软件，这意味着它可以自由部署和修改（甚至以$$出售）。 Flare的设计是从其前身prefuse（适用于Java的可视化工具包）改编而来的。

应用领域

教程

有关学习ActionScript和Flare的分步教程。

入门

第一步是设置开发工具。

设置一个有效的Flash开发环境。 有两种方法。为了简单起见，我们建议使用第一种方法，但是欢迎更多高级用户使用第二种方法。
- 选项1（更简单）：安装Adobe Flex Builder.
  - 这是ActionScript / Flex应用程序的完整开发环境。它适用于所有主要平台（Windows，Mac，Unix）。已经使用Eclipse IDE的用户还可以将Flex Builder安装为Eclipse插件。
  - 使用Flex Builder的警告是它是商业软件，并且只能在有限的试用期内使用。但是，Adobe向大学生，教职员工提供免费的Flex Builder许可证。
- 选项2（更复杂）：安装免费的Flex SDK
  - 这将安装基本的ActionScript / Flex编译器： mxmlc 和 compc。然后，您可以设置自己的构建环境，例如，使用 make or ant 建立系统。喇叭口包装有 build.xml 文件用于阿帕奇蚂蚁构建系统。安装ant后，只需打开 build.xml 文件，在文本编辑器中，将前几行更改为指向您的Flex 软件开发套件（SDK）安装，然后使用 ant 编译库。我们利用Adobe Labs的蚂蚁任务进行Flex开发。
  - 这种方法的优点是所有软件都是免费的，不会在您身上过期。但是，您会失去Flex Builder提供的自动编译，项目管理和自动完成等功能。
下载预熔火炬库。
- 下载是一个zip文件，其中包含一组ActionScript库项目。如果使用的是Flex Builder，则将文件解压缩到您的主要工作区目录中。在教程中，我们将它们导入Flex Builder，并使用它们来构建可视化！
- 该软件当前为Alpha版，因此可能会出现一些错误和限制。我们将尽快解决问题，并且上面的链接将始终指向最新版本。

Flash和ActionScript 3简介

Flash是用于交互式图形的绝佳环境，并且随着最近添加的ActionScript 3编程语言，它变得更加强大和高效。尽管对AS3的完整介绍不在本教程的讨论范围内，但以下一些资源对您有用：

Adobe提供了AS3概述，以及指向其他资源的链接。
基本ActionScript 3 O'Reilly出版公司的Colin Moock撰写的一本好书可以帮助您入门。您可以在这里在线访问（某些机构，例如大学，免费提供访问权限）。
《 Adobe Flex API参考》对于理解可用的不同类和方法非常有用。我们将只专注于 flash.* 包。

本教程假定您基本熟悉ActionScript语法和类型以及面向对象编程的概念。

第1部分：DisplayObjects

介绍

Flash使用来为2D视觉场景建模场景图。视觉对象按层次结构组织，子对象在父对象的坐标空间中定义。您经常会看到此场景图称为 显示清单 在Adobe文档和Flash编程书籍中都有介绍。
显示列表顶部的节点始终是 Stage 宾语。舞台上总是只有一个孩子。这称为 root，并且所有可视项都在根目录下。通常，根目录是您的实际Flash应用程序。我们将很快回到这一点。
可以添加到显示列表的所有视觉项目都是 DisplayObject 类。的子类 DisplayObject 包括 Bitmap （用于图像）， TextField （用于交互式文本区域），以及 Video （以YouTube为例）。但是，最常见的情况是 Sprite 和 Shape 类。作为参考，可以在 flash.display 软件包（尽管最终您可能会发现 flash.text 使用包）。
Sprite 类是Flash Player使用的最有用的常规可视对象。子画面是既包含图形内容又可以用作显示列表中子节点容器的视觉对象（ Sprite 类将 flash.display.DisplayObjectContainer 类）。相反， Shape 类可以包含图形内容，但不能容纳子节点。结果，Shape占用更少的内存，但灵活性却大大降低。为了简单起见，在本教程中我们将重点介绍Sprites。

创建一个新的应用程序

首先，让我们创建一个新的Flash应用程序。为此，请打开Flex Builder，并确保您处于“ Flex开发”透视图（通常通过单击右上角的黑白“ Fx”图标来访问）。
在左侧的“导航器”窗格中，右键单击显示并选择“新建> ActionScript项目”。在出现的对话框中，输入“ Tutorial”作为项目名称，然后单击“ Finish”。这将为您创建一个新项目。
现在，您应该在“导航器”窗格中看到一个“教程”文件夹。在此文件夹中，您应该看到一个名为“ Tutorial.as”的文件。这是您的主要应用程序文件。打开它（如果尚未打开）。
在文件内部，您将看到该类的基本支架：

包{import flash.display.Sprite; public class Tutorial扩展了Sprite {public function Tutorial（）{}}}

请注意，此类扩展了 Sprite 类。因为这是我们的主要应用程序类，所以当我们运行该应用程序时， Tutorial 该类将作为其类别自动添加到显示列表中 root （ Stage).
还要注意，已经自动创建了一个构造函数。应用程序启动时将调用此构造函数。对于那些熟悉C，C ++或Java之类的编程语言的人来说，应用程序类的构造函数的行为很像 main 使用其他语言。
有了这个新的应用程序脚手架，我们就可以开始玩视觉对象了。但是，我们首先要做的是一件事。在类声明的上方添加新行（“public class Tutorial…”）行中说：

[SWF（width =“ 800”，height =“ 600”，backgroundColor =“＃ffffff”，frameRate =“ 30”）]

此行定义了应用程序的默认设置（已编译并另存为项目的“ bin”目录中的.swf文件）。上面，我们为应用程序设置了大小，背景色和目标帧速率（以每秒帧数为单位）。

精灵

像所有 DisplayObjects, Sprite 开箱即用地支持许多视觉属性。这包括 x, y, scaleX, scaleY, rotation及 alpha 属性。它们分别改变了一个精灵（及其所有子元素！）的位置，大小，方向和透明度。记住，我们在这里使用一个场景图。
但是，这些值的意义并不大，因为精灵默认情况下不包含任何内容。我们将从绘制自己的内容开始。
每个雪碧都有一个 graphics 属性。我们可以用它来绘制图形 Sprite。该 graphics 属性是的实例 flash.display.Graphics 类，提供许多矢量绘图命令。
在下面的示例中，我们要做很多事情。

首先，我们创建一个新的 Sprite.
其次，我们使用精灵的 graphics 用灰色填充和黑色轮廓绘制一个圆圈。
- beginFill 设置当前的填充颜色和样式。第一个参数是颜色（以十六进制表示），第二个参数是alpha值，其范围从0（完全透明）到1（完全不透明）。
- lineStyle 设置当前的笔触颜色和样式。第一个参数是线宽，第二个参数是颜色。
- drawCircle 在精灵的坐标空间中的10点绘制一个半径为0,0的圆。
第三，我们将精灵作为主应用程序的子级添加（ Tutorial 雪碧）。
第四，我们设置 x 和 y 我们精灵的位置。
第五，我们添加一些调试输出。 trace 将字符串输出到控制台。仅在“调试”模式下运行应用程序时，才会显示此输出。

这是代码：

包{import flash.display.Sprite; [SWF（width =“ 800”，height =“ 600”，backgroundColor =“＃ffffff”，frameRate =“ 30”）]公共类教程扩展了Sprite {public function Tutorial（）{var sprite：Sprite = new Sprite（） ; sprite.graphics.beginFill（0xcccccc，0.5）; sprite.graphics.lineStyle（1，0x000000）; sprite.graphics.drawCircle（0，0，10）; this.addChild（sprite）; sprite.x = 50; sprite.y = 50; trace（“我们的精灵位于：” + sprite.x +“，” + sprite.y）； }}}

运行应用程序（右键单击“ Tutorial.as”，然后选择“运行方式> Flex应用程序”）。您应该在左上角以50、50点为中心看到带有黑色轮廓的灰色圆圈。如果在调试模式下运行应用程序（选择“调试方式> Flex应用程序”），那么您还应该看到字符串“ our Sprite位于输出控制台中的：50、50”。

嵌套精灵

现在让我们的场景更加有趣。让我们从将Sprite生成代码移动到新方法开始。我们将这个方法添加到我们的类中：

 私有函数createCircle（x：Number，y：Number）：Sprite {var sprite：Sprite = new Sprite（）; sprite.graphics.beginFill（0xcccccc，0.5）; sprite.graphics.lineStyle（1，0x000000）; sprite.graphics.drawCircle（0，0，10）; sprite.x = x; sprite.y = y; 返回精灵 }

接下来，我们替换构造函数中的代码。首先，我们创建一个名为容器的新精灵，用于容纳一组圆形。我们将其放置在舞台中央。其次，我们使用循环来创建一堆圆圈。在这里，我们围绕父容器的0,0点对称地排列圆圈。现在，我们的新构造函数如下所示：

 公共功能Tutorial（）{var container：Sprite = new Sprite（）; container.x = 400; container.y = 300; this.addChild（container）; 对于（var i：int = 0; i <10; ++ i）{var x：Number =（i / 5 <1？1：-1）*（13 + 26 *（i％5））; container.addChild（createCircle（x，0））; }}

运行新版本的应用程序。您应该在应用程序的中间看到一行十个圆圈。
现在，我们可以修改容器以更新其中的所有圆圈。尝试在容器子画面上设置不同的视觉变量。例如，修改 x, y, scaleX, scaleY, rotation及 alpha 属性。

其它主题

Flash提供的基本选项还有很多其他功能。不幸的是，它们超出了我们在这里的时间。要探索的一些东西包括图像过滤器（请 flash.filters 包），您可以使用它们添加视觉效果以显示对象 filters 属性，以及 flash.display.Graphics 类，包括填充和线条样式，以及更多2D绘图例程。

第2部分：动画

现在我们可以创建视觉对象了，该开始赋予它们一些生命了。耀斑包括 flare.animate 包可以帮助您轻松实现。首先，我们需要导入耀斑库以在Flex Builder中使用。

导入库

在继续之前，请确保已将Flare库作为项目加载到Flex Builder中。您应该已经将耀斑文件解压缩到主要的Flex Builder工作空间目录中。下一步是将它们导入Flex Builder环境：

确保您处于“ Flex开发”透视图。
右键单击左侧的导航器窗格。
在弹出菜单中选择“导入...”。
在对话框中，选择“常规>工作区中的现有项目”，然后单击“下一步”按钮。
使用“选择根目录”小部件导航到Flex Builder工作空间目录
现在，您应该会在“项目：”面板中看到火炬项目。
选择“ flare”和“ flare.demos”项目，然后单击“ Finish”按钮。

现在，您应该在“导航器”窗格中看到火炬项目。现在，您可以浏览库和演示的源代码。

火炬库概述

这是火炬工具包的快速概述。在 - 的里面 flare 项目，请查看“ src / flare”文件夹。您会发现许多提供不同功能的软件包：

analytics：用于计算统计数据和分析数据的运算符
animate：用于创建动画的工具
data：读写数据集的方法
display: DisplayObject 类型扩展由 flash.display
flex：在Flare应用程序中嵌入Flare可视化文件的包装器
physics：物理引擎，用于物理效果或受力控制的布局
query：ActionScript对象的查询处理器
scale：用于处理数据刻度（例如线性，对数和时间刻度）的类
util：一组实用程序类，提供常用的功能
vis：火炬可视化组件和运算符

也有 flare.demos 项目，其中提供了许多有关如何创建Flare组件的示例。

在另一个项目中导入库

要在您自己的项目中使用耀斑，您将需要更新项目设置。这样做的方法如下：

在“导航器”窗格中，右键单击“ Tutorial”项目的顶部文件夹
在上下文菜单中单击“属性”
在出现的对话框中，单击左侧面板中的“ ActionScript构建路径”（它应该是顶部的第三个项目）
点击右侧面板中的“库路径”标签
点击“添加项目”按钮
现在，您应该看到项目列表，包括火炬。
选择“耀斑”，然后单击“确定”

现在，您已经将Flare库添加到了项目中，并且可以使用它提供的任何类。
关于Flex编译器的一件事要注意-默认情况下，它仅包含您在应用程序中实际使用的类。因此，即使导入非常大的库，最终的.swf文件的大小仍可能很小。但是，请注意，如果您使用反射在应用程序中执行动态类加载，则可能会导致问题（本教程中未介绍的更高级的功能）。

基本动画：补间，序列和并行

好吧，现在让我们动起来！的 flare.animate.Transition class是所有动画的基类。的重要子类 Transition 是 Tween, Sequence及 Parallel 过渡。补间用于对单个对象的属性进行动画处理。序列用于按顺序运行一系列动画。并行转换同时运行一组转换。让我们从吐温开始。

补间对象属性

Tween类的基础很简单：我们获取一个对象，提供一组我们希望随时间更改的属性值，并指定更改的持续时间。使用第1部分中的Tutorial应用程序，让我们旋转容器对象。将以下行添加到Tutorial类构造函数的末尾：

 var tween：Tween = new Tween（container，3，{rotation：360}）; tween.play（）;

另外，请确保在类的顶部有一个新的import语句，以便编译器知道您在说什么。将此添加到导入列表：

 导入flare.animate.Tween;

（注意：有时，当您键入新的类名时，Flex Builder会自动为您添加一个导入语句。否则，另一种方法是将文本光标放在结束的新类名，然后输入“ Ctrl-Space”，这将为您创建该类的新导入。）
现在运行您的应用程序-点应在3秒钟内旋转一圈。
这是Tween构造函数的作用：

第一个参数是应该补间值的对象
第二个参数是动画的长度，以秒为单位
第三个参数是一个Object实例，列出了要设置动画的属性及其目标值。
- 属性名称必须与输入对象的属性完全匹配。
- 嵌套属性是允许的，但必须用引号引起来。例如， {“data.profit”:50} 如果输入对象具有名为data的属性，而该属性又具有名为profit的属性，则为合法输入。

play 然后，该方法将运行动画。的 play 也可以使用一个布尔值参数调用Boolean方法，该参数指示是否反向运行动画。
您可能已经注意到旋转动画显示出一定的加速度。这是因为默认设置为 Tween 实例将使用“慢进慢出”动画。您可以使用以下方式控制这些行为 Easing 功能。这些函数将当前动画进度作为介于0到1之间的一个分数作为输入，然后返回一个受控的进度分数以通常以非线性方式更改动画的速度。
要删除缓动（即使用线性缓动函数），您可以编写： tween.easing = Easing.none。只要确保您导入了 flare.animate.Easing 类位于文件顶部。
随意尝试其他缓动功能。例如，缓动功能可能涉及缓入（仅操纵动画的开始），缓动（仅操纵动画的结束）或两者。例如，尝试以下操作： tween.easing = Easing.easeOutBounce。这应该使旋转在最后反弹。
在继续之前，请尝试设置容器的其他属性动画，例如位置，比例或Alpha值。

复合动画

Sequence 和 Parallel 类允许您将动画分组在一起。序列一个接一个地运行一组动画。例如，尝试以下操作：

 var t1：Tween = new Tween（container，1，{y：100}）; var t2：Tween = new Tween（container，1，{scaleX：2}）; var t3：Tween = new Tween（container，1，{y：300}）; var t4：Tween = new Tween（container，1，{scaleX：1}）; var seq：Sequence = new Sequence（new Parallel（t1，t2），new Parallel（t3，t4））; seq.play（）;

您还需要在文件顶部添加一些新的import语句：

 导入flare.animate.Parallel; 导入flare.animate.Sequence;

这将创建四个补间： t1, t2, t3及 t4。然后创建两个并行的过渡 t1 和 t2 一起跑 t3 和 t4 一起。然后，并行转换按顺序一个接一个地运行。这样，很容易制作更复杂的动画。
有关更高级的合成动画，请查看 FlareLogo 和 flare.demos.Animation 中的类 flare.demos 项目。

带过渡器的批处理动画

使用 Tween, Parallel及 Sequence 类，您可以进行任意数量的动画过渡。但是，在处理大量对象（在可视化中很常见）时，手动处理一组类似的大型补间可能会很痛苦。此外，应该容易地运行单独的例程来编码视觉属性，例如布局，颜色，大小，形状，而不必担心处理动画。也许您想为更改设置动画，或者您想进行静态更新。无论哪种方式，您都应该能够重用相同的代码来分配值。
为了解决这些问题，Flare提供了 Transitioner 类。过渡器简化了为对象集合创建动画的过程。您只需拿一个对象，然后一对一地设置所需的属性。在幕后，过渡器将自动生成并重新使用必要的补间，以对整个动画进行建模。此外，如果不需要动画，可以将过渡器配置为立即设置属性值。简而言之，过渡器为更新对象属性提供了一个间接层-可以收集这些更新，然后对其进行动画处理，或立即应用这些更新。
这是在我们的教程应用程序中使用过渡器的简单示例。

 var t：Transitioner = new Transitioner（2）; 对于（var j：int = 0; j

本示例对所有精灵进行动画处理 container 到新的随机 y 位置和随机垂直比例因子。我们首先创建一个新的 Transitioner 应该会创建一个2秒的动画。然后，我们遍历每个子精灵，并使用过渡器将属性设置为Tween。
过渡者 $ 运算符表示我们要为输入对象设置目标值。默认情况下， Tween 已创建或已存在 Tween 找到当前项目。的 $ 然后，运算符返回一个对象，在其上设置补间的target属性。
此外，过渡器可用于创建静态（非动画）过渡。如果是过渡者 immediate 属性设置为true，则不会创建新的Tweens。相反，$运算符将简单地返回输入值。这意味着您可以创建使用过渡器更新值的方法，然后再控制是否要更新这些值。标准的“即时模式” Transitioner 使用静态检索 Transitioner.DEFAULT 属性。这样，您无需分配新的 Transitioner 执行立即更新时。
过渡器在整个 flare.vis 软件包，使可视化设计人员可以控制应对哪些更新进行动画处理以及如何对其进行动画处理。

第3部分：可视化

加载数据中

Flare的基本数据表示仅使用内置的Flash数据类型： Object 和 Array。例如，一个数据表可以仅表示为一个对象数组，每个对象都包含每个数据字段的名称和值。尽管可以实现更有效的表示，但是这种方法提供了最大的灵活性，同时还利用了现有的Flash开发约定。
要将数据加载到Flash Player中，有多种方法。一种简单的方法是将您的数据嵌入到应用程序本身中。这样，数据将与应用程序一起下载，这对于静态数据集是很好的选择。例如，您可以使用ActionScript的对象符号将数据集直接定义为变量：

var data：Array = [{{id：“ Q1”，销售额：10000，利润：2400}，{id：“ Q2”，销售额：12000，利润：2900}，{id：“ Q3”，销售额：15000，利润：3800}，{id：“ Q4”，销售额：15500，利润：3900}]；

但是，在许多情况下，您可能想从网页中动态加载数据（可以在浏览器中使用JavaScript将值传递到Flash中），也可以从Internet上的服务器动态加载数据。有很多方法可以做到这一点，您应该选择最适合您的特定应用程序的方法。例如，ActionScript提供了其他数据类型和语法以用于 XML 使用ECMAScript进行数据 XML （E4X）标准。
Flare还提供了一些实用程序来加载外部数据集。它支持从Internet上的任何服务器加载数据并将该数据转换为内部ActionScript对象。当前支持的文件格式是制表符分隔的文本（“制表符”，一种用于从Excel等工具导出数据的标准文件格式）， JavaScript对象表示法（“ json”，Web应用程序的通用数据格式），以及图形语言（“ graphml”， XML 用于表示具有节点和边的网络的格式）。
远程数据使用 flare.data.DataSource 类。这是一个使用它加载制表符分隔的数据文件的示例：

var ds：DataSource = new DataSource（“ http://flare.prefuse.org/data/test.tab.txt”，“ tab”）; var loader：URLLoader = ds.load（）; loader.addEventListener（Event.COMPLETE，function（evt：Event）：void {//加载完成后处理数据的函数var ds：DataSet = loader.data作为DataSet； //现在对数据进行处理...} ）;

DataSource 构造函数具有两个必需的参数：数据集的url和一个指示文件格式的字符串。现在支持的格式是“制表符”（制表符分隔），“ json”（JavaScript对象表示法）和“ graphml”（GraphML）。
对于可能不清楚其模式（字段的名称和数据类型）的数据集，还有第三个可选的构造函数参数，它使用 DataSchema 类型。见 flare.data.DataSchema 和 flare.data.DataField 类更多。该模式有助于确保正确命名数据值（例如，对于缺少标题行的制表符分隔文件）并转换为正确的数据类型（例如，对于将数字值括在引号中的JSON数据）。
要实际加载数据，将调用DataSource加载方法，并返回一个 flash.net.URLLoader 实例。加载程序可用于跟踪下载进度（例如，如果您想提供进度条），并在下载完成时提供通知事件。在上面的示例中，我们添加了一个事件侦听器，以便在下载完成时得到通知。的 DataSource 会自动解析输入数据，将其映射到ActionScript对象，并将结果存储在 flare.data.DataSet 宾语。的 DataSet 类可以表示表和网络（节点/边缘）数据。

创建和管理视觉对象

现在我们想可视化一个数据集。为此，我们将单个数据记录映射到可视项中。 Flare提供了一组可视对象来表示数据。这是由 flare.vis.data 包。

DataSprite：可视化表示数据的Sprite的基类。 DataSprite 是Flash Player的子类 Sprite 类。 DataSprite 包括 data 属性，用于存储数据元组（ActionScript对象），并提供基本sprite支持的视觉变量以外的其他视觉变量，包括颜色，形状和大小字段，以及支持在极坐标中设置位置。
NodeSprite: DataSprite 代表节点的实例。这是用于可视化数据的默认类型。 NodeSprite 实例可以通过以下方式在网络或树结构中连接： EdgeSprite 实例。
EdgeSprite: DataSprite 代表边缘的实例。一个 EdgeSprite 连接两个 NodeSprites。可通过以下方式访问节点 source 和 target 属性。 EdgeSprites 用于创建图和树，以及表示线，例如在时间序列图中。

通常，将创建NodeSprites和EdgeSprites并将其存储在 flare.vis.data.Data 类，用于管理单个可视化的所有可视项。的 Data 类提供了用于为数据元组创建新的可视对象并表示图形结构的方法。
Data 类还提供用于遍历和更新所包含的数据项的方法。的 nodes 和 edges 属性返回数据中包含的节点和边的列表。每个列表都包含一个 visit 允许您传递函数的方法，该函数随后将在每个节点或边上调用。另外， setProperty 和 setProperties 方法允许您一次为所有节点或边设置属性值。这些方法可以选择 Transitioner 作为参数，因此您可以为属性更新设置动画。
例如，以下代码将产生一秒钟的动画，其中所有节点的线条颜色均设置为蓝色。（请注意， DataSprite 颜色值包括Alpha以及红色，绿色，蓝色通道）。

data.nodes.setProperty（“ lineColor”，0xff0000bb，新的Transitioner（1））。play（）;

节点和边缘列表还支持默认属性值，使用 setDefault, setDefaults, removeDefault及 clearDefaults 方法。默认值将在使用数据类的新创建的节点或边上设置 addNode or addEdgeFor 方法。
Tree 类是的子类 Data，专门代表树而不是一般图形。的 Data 类支持自动创建 Tree 通过计算一般图的生成树来实例化。可以将许多生成树创建方法（包括广度优先，深度优先和最小生成树算法）作为参数传入。这些计算使用 flare.analytics.graph.SpanningTree 类。
要实际创建节点和边对象，我们使用 addNode 和 addEdgeFor 方法。

addNode 接受一个输入数据元组（ Object）并创建一个新 NodeSprite 用于可视化该数据。
addEdgeFor 需要两个 NodeSprites 并添加一个 EdgeSprite 连接他们。该方法还可以选择除数据元组（同样， Object 代表任何数据字段）。

这是创建的简单示例 NodeSprites 对于表格数据集，假设我们有一个数据对象数组：

var list：Array; //我们已经加载了var data的数据对象数组：Data = new Data（）; //每个容器都有一个新的数据容器（列表中的o：var对象）{data.addNode（o）; }

结果是 Data 视觉填充的对象 DataSprite （节点或边）实例。
实际上，您不必总是手动填充可视化数据。创建一个 Data 用于可视化已加载数据集的对象，通常可以使用便捷方法。的 Data.fromArray() 函数创建一个 Data 存储为ActionScript对象数组的表格数据的实例，而 Data.fromDataSet() 方法类似地创建一个 Data 已加载的实例 DataSet 目的。

构造可视化

现在，我们将所有这些放在一起开始进行可视化。的 Visualization 类表示单个可视化，包括可视标记（存储在 Data 实例）和轴。为了创建可视化，我们加载数据集，将数据添加到可视化中，并设置确定如何可视化数据的运算符。这是一个例子。首先查看代码，然后继续阅读以了解每个部分的工作。

包{import flare.data.DataSet; 导入flare.data.DataSource; 导入flare.scale.ScaleType; 导入flare.vis.Visualization; 导入flare.vis.data.Data; 导入flare.vis.operator.encoder.ColorEncoder; 导入flare.vis.operator.encoder.ShapeEncoder; 导入flare.vis.operator.layout.AxisLayout; 导入flash.display.Sprite; 导入flash.events.Event; 导入flash.geom.Rectangle; 导入flash.net.URLLoader; [SWF（width =“ 800”，height =“ 600”，backgroundColor =“＃ffffff”，frameRate =“ 30”）]公共类教程扩展了Sprite {private var vis：Visualization; 公共功能Tutorial（）{loadData（）; }私有函数loadData（）：void {var ds：DataSource = new DataSource（“ http://flare.prefuse.org/data/homicides.tab.txt”，“ tab”）; var loader：URLLoader = ds.load（）; loader.addEventListener（Event.COMPLETE，function（evt：Event）：void {var ds：DataSet = loader.data as DataSet; visualize（Data.fromDataSet（ds））;}）; }私有函数visualize（data：Data）：void {vis = new Visualization（data）; vis.bounds = new Rectangle（0，0，600，500）; vis.x = 100; 可见.y = 50; addChild（vis）; vis.operators.add（new AxisLayout（“ data.date”，“ data.age”）））; vis.operators.add（new ColorEncoder（“ data.cause”，Data.NODES，“ lineColor”，ScaleType.CATEGORIES））; vis.operators.add（new ShapeEncoder（“ data.race”））; vis.data.nodes.setProperties（{fillColor：0，lineWidth：2}）; vis.update（）; }}}

让我们看看每种方法。
构造函数很简单：它只需调用 loadData 方法。
loadData 方法创建一个新的数据源并使用前面介绍的方法加载它。在这种情况下，报告的数据集是2007年洛杉矶县的凶杀案，以制表符分隔的格式存储。加载完成后，已加载的数据元组将添加到 Data 实例使用 fromDataSet 方便的方法。在引擎盖下，这导致了 NodeSprites 用于可视化每个数据项。最后， visualize 方法被调用。
visualize 方法设置可视化。这是每个步骤中正在发生的事情：

第1部分：初始化
- 为数据创建一个新的可视化文件
- 我们为可视化设置边界。这确定了布局区域。
- 我们设置 x 和 y 可视化的位置，并将可视化添加到显示列表。
第2部分：指定视觉编码
- 我们使用轴布局，在x轴上放置“日期”，在y轴上放置“年龄”。的 AxisLayout 操作员还可以自动配置可视化的轴。我们使用语法“ data.date”来表示数据变量，因为它们位于 NodeSprite的 data 属性。
- 我们添加了一种颜色编码，以便节点的线条颜色代表“ cause”（死亡原因）变量。我们还告诉颜色编码器，“ cause”变量的值表示类别（ScaleType.CATEGORIES）。颜色编码器将使用此信息自动选择合适的调色板。正如我们不久将看到的，您还可以提供自己的调色板。
- 我们添加了形状编码，以便对象的形状代表受害者的“种族”。
- 我们设置默认属性–将节点的填充颜色设置为完全透明，并将线宽设置为2像素。
- 最后，我们称 update 方法。这将按顺序运行所有运算符。

更新可视化

创建可视化文件后，我们可能要对其进行更新。例如，也许我们想更改颜色编码以可视化人们的性别。
首先，让我们向类添加一个新方法：

 私有函数colorByGender（）：void {var color：ColorEncoder = ColorEncoder（vis.operators [1]）; color.source =“ data.sex”; color.palette =新的ColorPalette（[0xffff5555，0xff8888ff]）; vis.update（new Transitioner（2）.play（）; }

此方法：

检索第二个运算符（索引为1的运算符）并将其强制转换为 ColorEncoder
改变 source 颜色编码器的属性，以使用“ data.sex”变量
设置新的调色板（在这种情况下，红色代表女性，蓝色代表男性-颜色顺序与标签的字母顺序匹配）
通过调用带有更新的动画来更改更改 Transitioner 设置为两秒钟的动画。的 vis.update 方法返回 Transitioner，因此我们可以在更新的返回值上调用play。（注意：您也可以省略 Transitioner 然后将数字2作为参数传递给 update。新 Transitioner 将自动创建并返回。）

现在我们需要连接应用程序，以便我们可以交互方式触发更新。为此，将以下代码添加到构造函数中：

 //添加可点击的标签var按钮：TextSprite = new TextSprite（“ Color by Gender”）; addChild（button）; button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener（MouseEvent.CLICK，function（evt：MouseEvent）：void {colorByGender（）;}）;

这段代码：

创建一个新的文本标签（TextSprite 是来自 flare.display 包）
将标签添加到应用程序并设置其位置
套数 buttonMode 为true（将鼠标悬停在标签上时会显示手形光标）
添加单击标签时触发的事件侦听器。我们添加了一个回调函数，该函数调用 colorByGender 方法。

为了使以上代码正常工作，我们需要在文件顶部包括以下其他导入语句：

 导入flash.events.MouseEvent; 导入flare.animate.Transitioner; 导入flare.display.TextSprite; 导入flare.util.palette.ColorPalette;

现在，您应该能够编译并运行该应用程序了。单击“按性别划分的颜色”标签应为颜色编码的变化设置动画。

下一步

上面的示例展示了Flash和Flare库的基础，但是还有许多其他功能尚待介绍。展望未来，我们建议（a）同时检查Flash和Flare API 文档以了解所有可用的类，以及（b）深入研究Flare演示，以了解如何使用此处显示的相同原理来构建许多其他可视化效果。或者，更好的是，浏览Flare源代码以了解幕后情况。
为了帮助完成此过程，以下是以下子包的一般概述： flare.vis:

flare.vis.axis：提供轴，标签和网格线
flare.vis.controls：用于选择，缩放等的交互处理程序
flare.vis.data：表示数据元素的可视对象
flare.vis.data.render：绘制的可插入渲染器 DataSprites
flare.vis.events：火炬框架中使用的事件类型
flare.vis.legend：表示用于描述视觉编码的图例
flare.vis.operator：定义可视化的基础
flare.vis.palette：用于颜色，形状和尺寸值的调色板
flare.vis.util：通用实用程序类

现在，您应该已经足够了解了演示中的演示了。 flare.demos 包。随意玩，修改，复制，粘贴和构建演示，以更好地了解Flash和Flare的工作原理。

链接

资料下载

工具

其他技术指南

支持

BitStarz Player赢得破纪录的$ 2,459,124！你能成为下一个大赢家吗？ >>>

Blokt 是领先的独立隐私资源，可保持最高的专业和道德新闻标准。

来源：https://blokt.com/tool/prefuse-flare

时间戳记： 2020 年 6 月 6 日

时间戳记： 2020 年 9 月 19 日