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

Question

我想制作一个类似于以下内容的 prefuse 堆积面积图：http: //prefuse.org/gallery/namevoyager/

但是，我不太确定从哪里开始，并且这些图表没有示例代码。我确实找到了 prefuse.action.layout.StackedAreaChart，但不确定如何处理它。

Answer 1

这是使用 StackedAreaChart 布局的可编译示例。我把它放在这里是因为我在其他任何地方都找不到它，希望它可以作为其他人的参考。这里的关键是要了解 StackedAreaChart 假定您的表遵循以下架构：

1. id 的一列，说“名称”，
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 演示。

Answer 2

你检查过Prefuse 手册吗？（不是太完整，但它是开始的东西）。

在其中，您可以找到一个示例应用程序，该应用程序向您展示如何在 Graph 元素上加载一些数据，以及如何将其部署到可视化项。

要生成一个StackedAreaChart，您需要将数据加载到一个prefuse.data.Table对象中，例如，您可以从 CSV 文件加载该对象：

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

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

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

希望这会有所帮助，至少作为第一次开始（代码片段不适用于复制粘贴，可能包含一些编译错误）。

祝你好运。