可視化工具solo show-----Prefuse自帶例子GraphView講解

　　2014.10.15日以來的一個月，擠破了頭、跑斷了腿、傷透了心、吃夠了全國最大餐飲連鎖店——沙縣小吃。其中酸甜苦辣，絕不是三言兩語能夠說得清道的明的。校招的兄弟姐妹們，你們懂得……

　　體會最深的一句話還是：出來混，遲早要還的。

　　一個月過去了，迷茫之際有太多無奈，無奈中又夾雜些許慶幸，歲月匆匆，人生不息，奮斗不止。

　　遵守最初的諾言，繼續走我可視化的道路：

　　上集摘要：一個月博文中大概介紹了可視化的一些常用工具，從可操作性、實用性、交互性等各方面進行了簡單的對比和總結，具體參見http://www.cnblogs.com/bigdataZJ/p/VisualizationSoloShow.html，結合自己的需求，挑出了Prefuse和Processing兩員大將出來露了一手，詳情請見http://www.cnblogs.com/bigdataZJ/p/VisualizationSoloShow2.html

　　一番角逐之后，Prefuse工具集脫穎而出，其強大的展示效果、開發者友好的API說明文檔、豐富的自帶Demo無一不讓我對其欲罷不能。下面我們來好好分析下Prefuse的強大之處：

1.Prefuse主要特征：

　　（1）任意數據類型的表格、圖和樹形數據結構，數據索引、選擇查詢，有效的內存占用

　　（2）具有布局、着色、大小、圖形編碼、扭曲、動畫等多個組件

　　（3）具有交互控制庫

　　（4）支持動畫過渡，通過一系列的活動調度機制

　　（5）支持平移、縮放等視圖變換

　　（6）對於交互過濾數據的動態查詢

　　（7）能夠使用可用的搜索引擎進行文本檢索

　　（8）具有布局和動畫的力導向模擬引擎

　　（9）靈活的多視圖展現，包括“概述+細節”和“小倍數”顯示

　　（10）內置類SQL語句查詢，可以用於編寫查詢語句實現查詢指定字段的數據

　　（11）提供查詢語句到Prefuse數據結構的數據映射的SQL查詢

　　（12）簡單、開發者友好的APIs文檔

2.Prefuse模型：

　　（1）prefuse.data包提供了 Table， Graph， Tree等數據結構；提供了一個data tables，他的行使用一個類 Tuple來表示；這個包中，Node和Edge來表示圖或者樹的一些成員。
　　作為一種高級特征的工具集，Prefuse提供了一種解釋性的表達式語言，該語言可以用來請求Prefuse中的數據結構並根據已有的數據列創建衍生的列數據。表達式語言的功能實現類在prefuse.data.expression包中，文本表達式解析類在ExpressionParser類中。
　　（2）prefuse.data.io包提供了文件的讀寫，包括表，圖和樹的結構，其中，表的格式：CSV和任意分割的文本文件，對於網絡，有 GraphML和 TreeML（XML也能）；prefuse.data.io.sql包提供了對SQL數據庫的查詢，並返回一個prefuse表
　　（3）可視化抽象是通過將數據添加到Visulization實例中來得到的，它除了包含原始數據外，還建立了一套完整的可視化體系，包括x、y的坐標軸，顏色，大小字體等值，任意的Tuple, Node, 或者 Edge被添加到Visulization實例中時候，相關的VisualItems實例就建立好了，如NodeItem和 EdgeItem就是VisualItems的實例。（也就是說，可視化抽象實現了添加的數據元素與VisualItems之間的映射）
　　（4）可視化映射工作由Action模塊來完成，它是有一系列獨立的處理模塊組成的，這些模塊來完成可視性、布局計算、顏色設定以及任何其他的可視化工作。prefuse.action包以及其子包會提供一系列布局，形變，動畫以及可視化編碼的工作。
　　（5）Renderer模塊決定了VisualItems的出現情況，Renderers模塊負責計算顯示區域，即如何將可視化圖形繪制在屏幕上。RendererFactory用來對Renderer進行管理，體現在給VisualItems分配適當的Renderer上。
　　（6）交互工作，Display組建負責完成交互方面的工作，起到一個類似於攝像機的功能，對顯示的區域進行選取，縮放。它直接與用戶相關。
一個Visualization可以與多個Display實例關聯，以實現多視圖參數配置，比如“概述+詳細”以及小倍數顯示視圖等。
　　（7）每個Display實例都支持若干個Controls,他們負責處理Display上鼠標和鍵盤的action。prefuse.controls包提供了一個預處理的控制器可以用來完成旋轉縮放Display的工作，通過prefuse.controls包的子類ControlAdapter可以實現對Display的控制。
　　（8）最后，prefuse.data.query 包提供了動態查詢綁定（？）的功能，這些綁定能夠生成合適的用戶界面組建，來直接操作這些查詢。

 

 3.Prefuse自帶Demo---GraphView.java詳解

　　下面是自己在研讀Prefuse源碼文件夾demos下的GraphView加的一些注釋：

//start of class GraphView

public class GraphView extends JPanel {

    private static final String graph = "graph";

    private static final String nodes = "graph.nodes";

    private static final String edges = "graph.edges";

    private Visualization m_vis;

   

    public GraphView(Graph g, String label) {

         super(new BorderLayout());//在GraphView的構造函數中調用超類的構造方法，並創建布局BorderLayout對象。

        // create a new, empty visualization for our data

        m_vis = new Visualization();//創建Visualization對象，使用默認的渲染工廠（DefaultRendererFactory）。Visualization類負責管理源數據與可視化組件之間的映射。

        // --------------------------------------------------------------------

        // set up the renderers

        LabelRenderer tr = new LabelRenderer();

        tr.setRoundedCorner(8, 8);

        m_vis.setRendererFactory(new efaultRendererFactory(tr));//新建標簽渲染器並注冊到Visualization上，使用的還是DefaultRendererFactory。

        // --------------------------------------------------------------------
        // register the data with a visualization

        // adds graph to visualization and sets renderer label field

        setGraph(g, label);// 向Visualization添加圖形Graph並為標簽域賦值。

       

        // fix selected focus nodes   聲明一個數據元組集合，並為該集合添加一個數據元組的監聽器

        TupleSet focusGroup = m_vis.getGroup(Visualization.FOCUS_ITEMS);

        focusGroup.addTupleSetListener(new TupleSetListener() {

        public void tupleSetChanged(TupleSet ts, Tuple[] add, Tuple[] rem)

            {

                for ( int i=0; i<rem.length; ++i )

                    ((VisualItem)rem[i]).setFixed(false);

                for ( int i=0; i<add.length; ++i ) {

                    ((VisualItem)add[i]).setFixed(false);

                    ((VisualItem)add[i]).setFixed(true);

                }

                if ( ts.getTupleCount() == 0 ) {

                    ts.addTuple(rem[0]);

                    ((VisualItem)rem[0]).setFixed(false);

                }

                m_vis.run("draw");

            }

        });//聲明一個數據元組集合，並通過匿名內部類的形式為該集合添加一個數據元組的監聽器（TupleSetListener），其中ts：變化的數據元組；add：已經加入的元組數組集合；rem：移除的數據集合。

         // --------------------------------------------------------------------

        // create actions to process the visual data

 

        int hops = 30;

        final GraphDistanceFilter filter = new GraphDistanceFilter(graph, hops);

 

        ColorAction fill = new ColorAction(nodes,

                VisualItem.FILLCOLOR, ColorLib.rgb(200,200,255));

        fill.add(VisualItem.FIXED, ColorLib.rgb(255,100,100));

        fill.add(VisualItem.HIGHLIGHT, ColorLib.rgb(255,200,125));

       

        ActionList draw = new ActionList();

        draw.add(filter);

        draw.add(fill);

        draw.add(new ColorAction(nodes, VisualItem.STROKECOLOR, 0));

        draw.add(new ColorAction(nodes, VisualItem.TEXTCOLOR, ColorLib.rgb(0,0,0)));

        draw.add(new ColorAction(edges, VisualItem.FILLCOLOR, ColorLib.gray(200)));

        draw.add(new ColorAction(edges, VisualItem.STROKECOLOR, ColorLib.gray(200)));// 根據設定距離hops新建一個圖形距離過濾器類；針對nodes，采取完全填充顏色的方式（FILLCOLOR），並對聚焦點（fixed ）、高亮點（與fixed node相鄰的點即highlight）以及剩余點分別賦予不同的顏色表現.將GraphDistanceFilter和ColorAction都注冊到聲明的ActionList對象上，並同時添加點與邊的描邊顏色以及填充顏色的ColorAction。      

        ActionList animate = new ActionList(Activity.INFINITY);

        animate.add(new ForceDirectedLayout(graph));

        animate.add(fill);

        animate.add(new RepaintAction());//聲明一個ActionList的animate對象，在該對象上添加布局方式（這里采用力導向布局方法ForceDirectedLayout），並添加上面的ColorAction類的fill對象以及一個重繪圖形Action。
        // finally, we register our ActionList with the Visualization.

        // we can later execute our Actions by invoking a method on our

        // Visualization, using the name we've chosen below.

        m_vis.putAction("draw", draw);

        m_vis.putAction("layout", animate);

        m_vis.runAfter("draw", "layout");//將draw和animate注冊到m_vis上，后面通過Visualization的方法觸發執行每個注冊的Action。

        // --------------------------------------------------------------------

        // set up a display to show the visualization
        Display display = new Display(m_vis);
        display.setSize(700,700);
        display.pan(350, 350);
        display.setForeground(Color.GRAY);
        display.setBackground(Color.WHITE);

       

        // main display controls
        display.addControlListener(new FocusControl(1));
        display.addControlListener(new DragControl());
        display.addControlListener(new PanControl());
        display.addControlListener(new ZoomControl());
        display.addControlListener(new WheelZoomControl());
        display.addControlListener(new ZoomToFitControl());
        display.addControlListener(new NeighborHighlightControl());//通過Display展現Visualization包括：設置畫布大小，平移范圍，前景背景顏色以及添加聚焦、拖拽、平移、縮放、滑輪、縮放至適合顯示、緊鄰高亮監聽器。

 

// overview display

//        Display overview = new Display(vis);

//        overview.setSize(290,290);

//        overview.addItemBoundsListener(new FitOverviewListener());

       

        display.setForeground(Color.GRAY);

        display.setBackground(Color.WHITE);

        

        // --------------------------------------------------------------------       

        // launch the visualization

       

        // create a panel for editing force values

        ForceSimulator fsim = ((ForceDirectedLayout)animate.get(0)).getForceSimulator();

        JForcePanel fpanel = new JForcePanel(fsim);

       

        final JValueSlider slider = new JValueSlider("Distance", 0, hops, hops);

        slider.addChangeListener(new ChangeListener() {

            public void stateChanged(ChangeEvent e) {

                filter.setDistance(slider.getValue().intValue());//只要調節面板上的值有變動就執行下面的run函數，重新布局界面

                m_vis.run("draw");

            }

        });

        slider.setBackground(Color.WHITE);

        slider.setPreferredSize(new Dimension(300,30));

        slider.setMaximumSize(new Dimension(300,30));//設置調節面板的背景顏色、大小

 

       

        Box cf = new Box(BoxLayout.Y_AXIS);

        cf.add(slider);

        cf.setBorder(BorderFactory.createTitledBorder("Connectivity Filter"));

        fpanel.add(cf);

        //fpanel.add(opanel);

        fpanel.add(Box.createVerticalGlue());

       

        // create a new JSplitPane to present the interface

        JSplitPane split = new JSplitPane();

        split.setLeftComponent(display);

        split.setRightComponent(fpanel);

        split.setOneTouchExpandable(true);

        split.setContinuousLayout(false);

        split.setDividerLocation(700);//為整張畫布布局，包括左邊、右邊應該呈現什么內容等

        // now we run our action list

        //m_vis.run("draw");

        add(split);

    }

   

    public void setGraph(Graph g, String label) {

        // update labeling

        DefaultRendererFactory drf = (DefaultRendererFactory)

                                                m_vis.getRendererFactory();

        ((LabelRenderer)drf.getDefaultRenderer()).setTextField(label);

        // update graph

        m_vis.removeGroup(graph);

        VisualGraph vg = m_vis.addGraph(graph, g);

        m_vis.setValue(edges, null, VisualItem.INTERACTIVE, Boolean.FALSE);

        VisualItem f = (VisualItem)vg.getNode(0);

        m_vis.getGroup(Visualization.FOCUS_ITEMS).setTuple(f);

        f.setFixed(false);

    }

   

    // ------------------------------------------------------------------------

    // Main and demo methods

   

    public static void main(String[] args) {

        UILib.setPlatformLookAndFeel();

       

        // create graphview

        String datafile = null;

        String label = "label";

        if ( args.length > 1 ) {//如果用戶在運行時有參數傳值則分別賦值給datafile和label

            datafile = args[0];

            label = args[1];

        }

        JFrame frame = demo(datafile, label); //通過調用demo函數完成整個界面的設計布局等，最終呈現一個JFrame

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // 關閉按鈕的動作為退出
    }

   

    public static JFrame demo() {

        return demo((String)null, "label");

    }

   

    public static JFrame demo(String datafile, String label) {

        Graph g = null;

        if ( datafile == null ) {

            g = GraphLib.getGrid(15,15);//如果datafile為空，則通過調用圖形庫GraphLib中的getGrid得到15*15的網狀圖形，如下圖所示
            label = "label";

        } else {

            try {

                g = new GraphMLReader().readGraph(datafile);//否則通過指定路徑讀取datafile文件並轉換為圖形

            } catch ( Exception e ) {

                e.printStackTrace();

                System.exit(1);

            }

        }

        return demo(g, label);

    }

   

    public static JFrame demo(Graph g, String label) {

        final GraphView view = new GraphView(g, label);

       

        // set up menu

        JMenu dataMenu = new JMenu("Data");//新建菜單欄

        dataMenu.add(new OpenGraphAction(view));//注冊“打開文件”選項卡

        dataMenu.add(new GraphMenuAction("Grid","ctrl 1",view) {//添加網狀布局選項卡

            protected Graph getGraph() {

                return GraphLib.getGrid(15,15);

            }

        });

        dataMenu.add(new GraphMenuAction("Clique","ctrl 2",view) {//添加團狀布局選項卡

            protected Graph getGraph() {

                return GraphLib.getClique(10);

            }

        });

        dataMenu.add(new GraphMenuAction("Honeycomb","ctrl 3",view) {//添加蜂窩狀布局選項卡

            protected Graph getGraph() {

                return GraphLib.getHoneycomb(5);

            }

        });

        dataMenu.add(new GraphMenuAction("Balanced Tree","ctrl 4",view) {//添加平衡樹布局選項卡

            protected Graph getGraph() {

                return GraphLib.getBalancedTree(3,5);

            }

        });

        dataMenu.add(new GraphMenuAction("Diamond Tree","ctrl 5",view) {

            protected Graph getGraph() {

                return GraphLib.getDiamondTree(3,3,3); //添加鑽石樹形圖布局選項卡

            }

        });

        JMenuBar menubar = new JMenuBar();

        menubar.add(dataMenu);//將以上菜單選項注冊到menubar菜單欄上

       

        // launch window

        JFrame frame = new JFrame("p r e f u s e  |  g r a p h v i e w");

        frame.setJMenuBar(menubar);

        frame.setContentPane(view);

        frame.pack();

        frame.setVisible(true);//添加菜單欄、圖形等

       

        frame.addWindowListener(new WindowAdapter() {

            public void windowActivated(WindowEvent e) {

                view.m_vis.run("layout");

            }

            public void windowDeactivated(WindowEvent e) {

                view.m_vis.cancel("layout");

            }

        });

       

        return frame;

    }


    // ------------------------------------------------------------------------

    /**

     * Swing menu action that loads a graph into the graph viewer.

         * 該類主要負責為每一種布局選項配置相應的快捷鍵

     */

    public abstract static class GraphMenuAction extends AbstractAction {

        private GraphView m_view;

        public GraphMenuAction(String name, String accel, GraphView view) {

            m_view = view;

            this.putValue(AbstractAction.NAME, name);

            this.putValue(AbstractAction.ACCELERATOR_KEY,

                          KeyStroke.getKeyStroke(accel));

        }

        public void actionPerformed(ActionEvent e) {

            m_view.setGraph(getGraph(), "label");

        }

        protected abstract Graph getGraph();

    }

    //該類負責對菜單欄的選項卡的響應

    public static class OpenGraphAction extends AbstractAction {

        private GraphView m_view;

 

        public OpenGraphAction(GraphView view) {

            m_view = view;

            this.putValue(AbstractAction.NAME, "Open File...");

            this.putValue(AbstractAction.ACCELERATOR_KEY,

                          KeyStroke.getKeyStroke("ctrl O"));

        }

        public void actionPerformed(ActionEvent e) {

            Graph g = IOLib.getGraphFile(m_view);

            if ( g == null ) return;

            String label = getLabel(m_view, g);

            if ( label != null ) {

                m_view.setGraph(g, label);

            }

        }

        public static String getLabel(Component c, Graph g) {

            // get the column names

            Table t = g.getNodeTable();

            int  cc = t.getColumnCount();

            String[] names = new String[cc];

            for ( int i=0; i<cc; ++i )

                names[i] = t.getColumnName(i);

           

            // where to store the result

            final String[] label = new String[1];

            // -- build the dialog -----

            // we need to get the enclosing frame first

            while ( c != null && !(c instanceof JFrame) ) {

                c = c.getParent();
            }

            final JDialog dialog = new JDialog(

                    (JFrame)c, "Choose Label Field", true);

           

            // create the ok/cancel buttons

            final JButton ok = new JButton("OK");

            ok.setEnabled(false);

            ok.addActionListener(new ActionListener() {

               public void actionPerformed(ActionEvent e) {

                   dialog.setVisible(false);

               }

            });

            JButton cancel = new JButton("Cancel");

            cancel.addActionListener(new ActionListener() {

                public void actionPerformed(ActionEvent e) {

                    label[0] = null;

                    dialog.setVisible(false);

                }

            });

            // build the selection list

            final JList list = new JList(names);
       list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);

            list.getSelectionModel().addListSelectionListener(

            new ListSelectionListener() {

                public void valueChanged(ListSelectionEvent e) {

                    int sel = list.getSelectedIndex();

                    if ( sel >= 0 ) {

                        ok.setEnabled(true);

                        label[0] = (String)list.getModel().getElementAt(sel);

                    } else {

                        ok.setEnabled(false);

                        label[0] = null;

                    }

                }

            });

            JScrollPane scrollList = new JScrollPane(list);

           

            JLabel title = new JLabel("Choose a field to use for node labels:");

           

            // layout the buttons

            Box bbox = new Box(BoxLayout.X_AXIS);

            bbox.add(Box.createHorizontalStrut(5));

            bbox.add(Box.createHorizontalGlue());

            bbox.add(ok);

            bbox.add(Box.createHorizontalStrut(5));

            bbox.add(cancel);

            bbox.add(Box.createHorizontalStrut(5));

            

            // put everything into a panel

            JPanel panel = new JPanel(new BorderLayout());

            panel.add(title, BorderLayout.NORTH);

            panel.add(scrollList, BorderLayout.CENTER);

            panel.add(bbox, BorderLayout.SOUTH);

            panel.setBorder(BorderFactory.createEmptyBorder(5,2,2,2));

           

            // show the dialog

            dialog.setContentPane(panel);

            dialog.pack();

            dialog.setLocationRelativeTo(c);

            dialog.setVisible(true);

            dialog.dispose();

           

            // return the label field selection

            return label[0];

        }

    }

    //該類負責調整至適合屏幕顯示

    public static class FitOverviewListener implements ItemBoundsListener {

        private Rectangle2D m_bounds = new Rectangle2D.Double();

        private Rectangle2D m_temp = new Rectangle2D.Double();

        private double m_d = 15;

        public void itemBoundsChanged(Display d) {

            d.getItemBounds(m_temp);

            GraphicsLib.expand(m_temp, 25/d.getScale());

           

            double dd = m_d/d.getScale();

            double xd = Math.abs(m_temp.getMinX()-m_bounds.getMinX());

            double yd = Math.abs(m_temp.getMinY()-m_bounds.getMinY());

            double wd = Math.abs(m_temp.getWidth()-m_bounds.getWidth());

            double hd = Math.abs(m_temp.getHeight()-m_bounds.getHeight());

            if ( xd>dd || yd>dd || wd>dd || hd>dd ) {

                m_bounds.setFrame(m_temp);

                DisplayLib.fitViewToBounds(d, m_bounds, 0);

            }

        }

    }

   

}

 // end of class GraphView

網格視圖：

蜂窩狀視圖：

平衡樹型視圖：

 

以上介紹了Prefuse的一些特征，模型結構以及自帶Demo GraphView.java的理解，后續會繼續研究Prefuse的其他Demo以及主要接口。

本文鏈接http://www.cnblogs.com/bigdataZJ/p/VisualizationSoloShow3.html

 

友情贊助

如果你覺得博主的文章對你那么一點小幫助，恰巧你又有想打賞博主的小沖動，那么事不宜遲，趕緊掃一掃，小額地贊助下，攢個奶粉錢，也是讓博主有動力繼續努力，寫出更好的文章^^。

　　　　1. 支付寶　　　　　　　　　　　　　　　　　　　　　　　　　　2. 微信