如何使用Prefuse制作堆积面积图？

Question

我想使用Prefuse制作类似于以下链接的堆叠面积图表: http://prefuse.org/gallery/namevoyager/。但我不太确定从哪里开始，也没有这些图表的示例代码。 我找到了prefuse.action.layout.StackedAreaChart，但不确定该怎么做。

- Jay Askren

Answer 1

以下是使用StackedAreaChart布局的可编译示例。我在这里包含它，因为我在其他地方找不到它，希望它对其他人有用作为参考。关键是要理解StackedAreaChart假定您的表格遵循以下模式：

1. 一个列用于id，例如“name”，
2. 一个或多个列用于与id相对应的实际数据。
3. 三列用于计算多边形，分别命名为“_polygon”、“_polygon:start”和“_polygon:end”。这就是StackedAreaChart类的设计方式。“_polygon”实际上是常量VisualItem.POLYGON，您可以像以下示例中所示一样使用它。

以下是示例：

import javax.swing.JFrame;
import prefuse.Constants;
import prefuse.Display;
import prefuse.Visualization;
import prefuse.action.ActionList;
import prefuse.action.RepaintAction;
import prefuse.action.assignment.ColorAction;
import prefuse.action.assignment.DataColorAction;
import prefuse.action.layout.StackedAreaChart;
import prefuse.data.Table;
import prefuse.render.DefaultRendererFactory;
import prefuse.render.PolygonRenderer;
import prefuse.util.ColorLib;
import prefuse.visual.VisualItem;

class Main {
    public static void main(String[] args) {
        ActionList color = new ActionList();
        int[] palette = new int[] {
            ColorLib.rgba(255,200,200,150),
            ColorLib.rgba(200,255,200,150)
        };
        ColorAction fillColor = new DataColorAction("table", "name",
                Constants.NOMINAL, VisualItem.FILLCOLOR, palette);
        color.add(fillColor);

        ActionList layout = new ActionList();
        layout.add(new RepaintAction());
        String[] fields = { "1980s", "1990s", "2000s" };
        layout.add(new StackedAreaChart("table", VisualItem.POLYGON, fields));

        Visualization vis = new Visualization();
        Table table = new Table();
        vis.add("table", table);

        table.addColumn("name", String.class);
        table.addColumn("1980s", int.class);
        table.addColumn("1990s", int.class);
        table.addColumn("2000s", int.class);
        table.addColumn(VisualItem.POLYGON, float[].class, null);
        table.addColumn(VisualItem.POLYGON+":start", float[].class, null);
        table.addColumn(VisualItem.POLYGON+":end", float[].class, null);

        int rowNumber = table.addRow();
        table.setString(rowNumber, "name", "Bob");
        table.setInt(rowNumber, "1980s", 1000);
        table.setInt(rowNumber, "1990s", 500);
        table.setInt(rowNumber, "2000s", 300);

        rowNumber = table.addRow();
        table.setString(rowNumber, "name", "Mary");
        table.setInt(rowNumber, "1980s", 800);
        table.setInt(rowNumber, "1990s", 1500);
        table.setInt(rowNumber, "2000s", 3200);

        vis.putAction("layout", layout);
        vis.putAction("color", color);

        DefaultRendererFactory drf = new DefaultRendererFactory();
        drf.add("ingroup('table')", new PolygonRenderer());
        vis.setRendererFactory(drf);

        Display display = new Display(vis);
        display.setSize(720, 500);

        JFrame frame = new JFrame("Prefuse StackedAreaChart Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add(display);
        frame.pack();
        frame.setVisible(true);

        vis.run("layout");
        vis.run("color");
    }
}

要显示轴，参考预装于 Prefuse 发行版中的 Congress.java 示例。

- holygeek

Answer 2

你看过Prefuse手册了吗？（不是很完整，但至少可以开始）。

在其中，你能找到一个示例应用程序，它会向你展示如何在图形元素上加载一些数据，以及如何将其部署到可视化项目中。

如果要生成一个StackedAreaChart，你需要将数据加载到一个prefuse.data.Table对象中，你可以按照示例从CSV文件中读取它：

CSVTableReader reader=new CSVTableReader();
Table myTable=reader.readTable("/myDataFile.csv");

然后，将表格作为数据组添加到可视化中，即“table”

Visualization vis = new Visualization();
vis.add("table", myTable);

接下来，创建StackedAreaChart，并将其添加到可视化操作集合中：

//params: name of the data group to layout, name of the data field in which to store computed polygons, and an array containing the names of the various data fields, in sorted order, that should be referenced for each consecutive point of a stack layer
StackedAreaChart chart=new StackedAreaChart ("table", fieldName, csvColumnsToCompute);
//add the layout action with a unique key
 vis.putAction("myChartLayout", chart);

然后，您可以配置各种布局操作或其他视觉方面（请参见链接的示例）。

最后，要显示图表，您需要创建一个Display对象，绑定可视化，并在其上运行布局操作：

//this Display initialization is extracted from the Example app
Display d = new Display(vis);
d.setSize(720, 500); // set display size
// drag individual items around
d.addControlListener(new DragControl());
// pan with left-click drag on background
d.addControlListener(new PanControl()); 
// zoom with right-click drag
d.addControlListener(new ZoomControl());

// 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(d);
frame.pack();           // layout components in window
frame.setVisible(true); // show the window

//At the end: RUN THE CHART ACTION:
vis.run("myChartLayout");

希望这能有所帮助，至少作为一个起点（代码片段不适合复制粘贴，可能包含一些编译错误）。

祝好运。

- Tomas Narros

---

谢谢。我几年前看过手册，但觉得内容太少，没怎么在意。现在看来它确实非常有价值。 - Jay Askren