漫谈可视化Prefuse（二）---一分钟学会Prefuse

前篇《漫谈可视化Prefuse（一）---从SQL Server数据库读取数据》主要介绍了prefuse如何连接数据库sql server并读取数据进行可视化展现。

　　回头想想还是应该好好捋一捋prefuse框架中各个主要接口的职责以及如何有序使用它们构建一个prefuse应用。首先看图：

 

　　从图中可以发现一个prefuse程序的编写需要经历以下步骤：

1. 准备好原始数据（文件或是数据库数据）；
2. 通过prefuse.data.io以及prefuse.data.io.sql包将数据读入prefuse，实现原始数据与内置丰富的数据结构如Table、Graph、Tree等之间的映射；
3. 为数据添加各种Action，执行布局、着色、设置形状等操作；
4. 将上面处理好的数据存入数据存储中心Visuallization中；
5. 为可视化组件添加渲染器Renderer，并将渲染器注册到Visualization上；
6. 通过Display将Visualization中的可视化组件显示到屏幕上；
7. 通过上图发现是个闭环图，当执行控制器以及过滤操作后又会得到更新后的Visualization，之后依次执行3、4、5、6步骤。

　　下面我们通过一个例子具体了解如何创建一个prefuse应用。

1. 加载数据：

首先是加载图数据到Prefuse的图实例中，这里用的是socialnet.xml数据集。代码中使用GraphMLReader类读取数据集。

 

在方法readGraph中关于能读取“/socialnet.xml”文件的说明：通过读源码发现首先会检查这个字符串是不是一个URL链接，如果是的话则直接打开这个链接，如果不是则检查其是否是一个Java Runtime 内的classpath资源链接，如果还不是，则会将该字符串视为一个文件或是文件系统。

 

Graph graph = null;

try {

    graph = new GraphMLReader().readGraph("/socialnet.xml");

} catch ( DataIOException e ) {

    e.printStackTrace();

    System.err.println("Error loading graph. Exiting...");

    System.exit(1);

}

 

2 .创建数据存储中心Visualization实例：

　　创建一个抽象的视觉图形。在此之前，需要创建一个Visualization实例并添加图形数据，同时在代码中可以看到还要赋给一个名称（group name）。当图或树的实例添加到Visualization对象上的时候，另外两个子组名（subgroups）也会自动被创建：一个是节点（以“.nodes”为后缀），一个是边（以“.edges”为后缀）

// add the graph to the visualization as the data group "graph"

// nodes and edges are accessible as "graph.nodes" and "graph.edges"

Visualization vis = new Visualization();

vis.add("graph", graph);

 

3.渲染和渲染工厂的创建：

　　使用Renderers渲染器绘制Visualization对象中的VisualItems。默认情况下，Visualization类中包含了DefaultRendererFactory，其使用EdgeRenderer（默认绘制直连边）、ShapeRenderer绘制图形（比如正方形或三角形）。当希望看到节点上标签值是，可以创建一个LabelRenderers并为标签数据域赋值。

// draw the "name" label for NodeItems

LabelRenderer r = new LabelRenderer("name");

r.setRoundedCorner(8, 8); // round the corners

// create a new default renderer factory

// return our name label renderer as the default for all non-EdgeItems

// includes straight line edges for EdgeItems by default

vis.setRendererFactory(new DefaultRendererFactory(r));

 

4.添加处理的动作Actions：

　　添加所需的视觉效果。通过创建不同的Action模块处理Visualization上的VisualItems。比如可以创建一个颜色动作事件（ColorActions），该VisualItem默认支持三种颜色赋值：描边颜色、填充颜色以及文本颜色。描边的颜色是线条和轮廓的颜色；填充颜色是VisualItem的内部颜色；文本颜色是文本或是标签的颜色。默认情况下，所有颜色都是纯透明的。ColorLib类提供了很多颜色赋值的方法。

　　通过以下代码可以看出通过创建DataColorAction完成颜色分配工作。DataColorAction构造器的参数如下：

　　（1）要运行的数据组名（这里是graph.nodes）

　　（2）数据域的名称（这里是gender）

　　（3）数据域的数据类型，有三种：NOMINAL（适用于类别标签集），ORDINAL（适用于有序集合），以及NUMERICAL（适用于数字）。

　　（4）颜色域的设置，有描边、填充和文本三种。

　　（5）可选的调色板

　　注意：这里DataColorAction对于赋值颜色的选取也是有排序的，一般是自然排序的顺序，比如对于文本来说是按照字母表的先后顺序来的。这就是为什么这里的粉红色排在前面，因为按照字母顺序，“F”排在“M”的前面。

// create our nominal color palette

// pink for females, baby blue for males

int[] palette = new int[] {

    ColorLib.rgb(255,180,180), ColorLib.rgb(190,190,255)

};

// map nominal data values to colors using our provided palette

DataColorAction fill = new DataColorAction("graph.nodes", "gender",  Constants.NOMINAL, VisualItem.FILLCOLOR, palette);

// use black for node text

ColorAction text = new ColorAction("graph.nodes", VisualItem.TEXTCOLOR, ColorLib.gray(0));

// use light grey for edges

ColorAction edges = new ColorAction("graph.edges",

    VisualItem.STROKECOLOR, ColorLib.gray(200));

// create an action list containing all color assignments

ActionList color = new ActionList();

color.add(fill);

color.add(text);

color.add(edges);

　　接着再创建关于动画布局的ActionList。所有的Action都可以进行参数控制的指定运行多少次（默认情况下是一次），也可以限定指定间隔时间运行，或者指定间隔时间无限制运行。代码中通过添加ForceDirectedLayout布局来进行图中节点的位置更新。添加RepaintAction（）来实现当布局重新计算后就进行图形重绘的功能。

// create an action list with an animated layout

// the INFINITY parameter tells the action list to run indefinitely

ActionList layout = new ActionList(Activity.INFINITY);

layout.add(new ForceDirectedLayout("graph"));

layout.add(new RepaintAction());

　　然后将这两个ActionLists添加到Visualization上，每个注册的Action都有唯一标示以方便调用。

// add the actions to the visualization

vis.putAction("color", color);

vis.putAction("layout", layout);

5.展现和交互控制：

　　创建Display实现数据可视化。这里创建一个Display实例将Visualization中的Visualitems进行参数配置。可以设置想要展现的Display的大小、像素。这里，我们添加三个交互控制器：

　　（1）         拖拽控制

　　（2）         平移控制

　　（3）         缩放控制

// create a new Display that pull from our Visualization

Display display = new Display(vis);

display.setSize(720, 500); // set display size

display.addControlListener(new DragControl()); // drag items around

display.addControlListener(new PanControl());  // pan with background left-drag

display.addControlListener(new ZoomControl()); // zoom with vertical right-drag

 

6.可视化呈现：

　　剩下要做的就是添加Display显示到一个应用程序窗口并让程序运行。该例中，创建Java Swing编程中的顶级类JFrame，设置标题。“pack”可以使得窗口合适的布局并确保窗口可见。

// create a new window to hold the visualization

JFrame frame = new JFrame("prefuse example");

// ensure application exits when window is closed

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.add(display);

frame.pack();           // layout components in window

frame.setVisible(true); // show the window

vis.run("color");  // assign the colors

vis.run("layout"); // start up the animated layout

执行结果如下：

　　

　　另外，在《可视化工具solo show-----Prefuse自带例子GraphView讲解》篇中，对GraphView.java进行了阅读并注释，这里再贴出RadialGraphView.java和TreeView.java的部分注释。

RadialGraphView.java

  View Code

TreeView.java