如何使用Prefuse制作堆積區域圖表？

Question

我想制作一個與下面類似的預制的堆積區域圖表： http ：//prefuse.org/gallery/namevoyager/

我不太確定從哪里開始，並且這些圖表沒有示例代碼。 我確實找到了prefuse.action.layout.StackedAreaChart，但我不知道該如何處理它。

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演示。

Answer 2

你檢查過Prefuse手冊了嗎？ （不是太完整，但它是開始的東西）。

在其中，您可以找到一個示例應用程序 ，它向您展示如何在Graph元素上加載一些數據，以及如何將其部署到Visualization項目。

要生成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");

希望這有幫助，至少作為第一個開始（代碼片段不是用於復制粘貼，可能包含一些編譯錯誤）。

祝好運。