Prefuse 2 简单案例分析

英文原文见http://prefuse.org/doc/manual/introduction/example/

    这个example是对一个社交网络进行力导引的布局，节点颜色表示性别，并且会显示所代表的人名。

第一步：载入数据

数据格式：

<!-- nodes --> 
<node id="1">
 <data key="name">Jeff</data>
 <data key="gender">M</data>
 </node>
<node id="2">
 <data key="name">Ed</data>
 <data key="gender">M</data>
</node>

<!-- edges -->
<edge source="1" target="2"></edge>
<edge source="1" target="3"></edge>

首先，将图数据导入到一个Graph实例中。使用 GraphMLReader的GraphReader函数可以实现对数据的导入

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);
}

这个函数首先会查看输入是否是合法的url，如果是，则会发出请求去请求数据信息，如果不是，则会在本地classpath下查找，在prefuse中，data文件夹是载入到classpath的，所以可以直接通过/string的方式来查看

第二步：可视化类

我们需要创建一个可视化抽象来描述Graph，这一步骤，我们讲创建一个Visualization实例，把graph数据导入进去。我们将graph的数据组（data group）以名字"graph"进行注册，当图或者树的实例添加到Visualization实例中后，会自动生成两个子数据组（subgroup），其后缀分别是：.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);

第三步：渲染机制
这一步中，我们需要建立渲染器（Renderers来）绘制Visaulization实例的中VisualItems，Visuzalization中包含一个默认的渲染工具DefaultRendererFactory，这个工具使用EdgeRenderer来渲染edge，而其他的Items使用ShapeRenderer来渲染。如果想观察label，可以使用 LabelRenderer，这个方法将会决定是否使用name字段的内容，

// 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));

第四步：处理
现在，可以进行可视化编码了。这些通过构建Action模块来实现，首先，构建ColorActions，每个VisualItems支持三种颜色值：stroke，fill和text的颜色，其中stroke是轮廓色，fill是填充色，text是文本色，默认色是全透明的。在prefuse中，颜色采用RGBA的格式。ColorLib提供了对颜色的处理方法。

为了上色，需要定义一个调色板，它以数组的形式表示系统允许出现的颜色，然后创建一个DataColorAction进行颜色的分配。

DataColorAction参数：要处理的数据组（data group），将要进行可视化编码的数据域（data field，如agent等），数据域的类型（NOMINAL 表示种类标签, ORDINAL 表示命令列表,NUMERICAL 表示数字），颜色域（上文提到的stroke，fill，text），调色板

对于NOMINAL和ORDINAL，是按照自然排序的方法来对应调色板的。同样，使用ColorAction来对节点的text color和stroke color进行上色。最后，使用ActionList将所有的颜色空间实例汇总到一个可视化单元。

// 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实例可以通过参数来设定是执行一次还是以动画的方式一直执行，参数INFINITY表示一直执行。接下来，添加一个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());

最后，将color和layout添加进来：

// add the actions to the visualization
vis.putAction("color", color);
vis.putAction("layout", layout);

第五步：显示与交互控制
最后，通过Display来实现显示，通过创建一个Display实例来配置实现可视化的工作，通过Display来设置size以及一些交互的设置。DragControl表示可以拖放可视化控件，PanControl移动可视化区域，ZoomControl缩放面板。

// 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

第六步：实施可视化

最后一步就是把Display实例添加到一个窗口上。首先，我们创建一个 JFrame实例，然后讲Display添加到JFrame上，然后使用pack自动调节大小，然后使用visible（）函数设置可见，最后，设置运行颜色和布局。

// 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