注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

CanvasXpress 我的免费拓扑  

2011-05-12 19:39:08|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

由于Twaver高昂的费用,所以拓扑布局只好选择其他组件了!!!

今天,就发现了开源软件CanvasXpress  http://canvasxpress.org/

CanvasXpress用于各种图形绘制,其他图形我们无需关注,只要关注拓扑图形绘制。http://canvasxpress.org/network.html

发现它有三种布局方式(networkLayoutType) 1.自定义坐标的方式

                                                                             2.radial(自动布局)

                                                                                CanvasXpress 我的免费拓扑 - zhenghaoju700 - zhenghaoju700 的博客

                                                                            3.forceDirected(自动布局)

                                                                                CanvasXpress 我的免费拓扑 - zhenghaoju700 - zhenghaoju700 的博客

 

另外 它还支持多点拖拽,区域放大,但是它在性能上不如flash。

写一个简单的DEMO

首先将数据简单抽象成Node和Edge

根据所需JSON对象,

Node的结构为

    public String id;
    public String color = "rgb(255,0,0)";
    public String shape = "square";
    public int size = 1;

(注意Node覆盖hashCode和equals方法,会将它放进set中过滤掉重复的数据)

Edge的结构为

    public String id1;
    public String id2;
    public String color = "rgb(255,255,0)";
    public int width = 1;
    public String type = "line";

 

将数据从ralation表中查出,

ralation表结构

id1                        id2

172.17.16.255      172.17.26.22

172.17.16.255       172.17.26.23

....   .....                                      

 

JDBC Code

package jsnetworktopu;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;

public class JDBCGetData {
    
    private Connection getConnection(String user,String password) {
        Connection conn = null;
        try {
            Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
            conn = DriverManager.getConnection ("jdbc:oracle:thin:@172.17.18.55:1521:orcl",user,password);
        }catch (Exception e) {
            return null;
        }
        return conn;
    }
    
    public Map<String,Object> queryDate(){
        Connection conn = getConnection(“hjzheng","hjzheng");
        Statement stat = null;
        ResultSet rs = null;
        Map<String,Object> map = new HashMap<String,Object>();
        try {
            stat = conn.createStatement();
            rs = stat.executeQuery("SELECT *  FROM  RALATION");
            Set nodes = new HashSet();
            Set edges = new HashSet();
            while(rs.next()){
                nodes.add(new Node(rs.getString(1)));
                nodes.add(new Node(rs.getString(2)));
                edges.add(new Edge(rs.getString(1),rs.getString(2)));
            }
            map.put("nodes", nodes);
            map.put("edges", edges);
        
        } catch (SQLException e) {
            e.printStackTrace();
        }finally{
            if(rs!=null){
                try {rs.close();} catch (SQLException e){}
            }
            if(stat!=null){
                try {stat.close();} catch (SQLException e){}
            }
            if(conn!=null){
                try {conn.close();} catch (SQLException e){}
            }
            
        }
        return map;
    }
}

在Action层 

map.put(”legend“,new Object());

得到map的结果,将它转成JSON   

datas = {

    nodes:[... ...],

    edges:[... ...],

    legend{... ...}

}

将它传到页面  使用JS

new CanvasXpress('canvas',datas,{graphType: 'Network', is3DNetwork: true});


结果如图

  CanvasXpress 我的免费拓扑 - zhenghaoju700 - zhenghaoju700 的博客

 

另外CanvasXpress的License是LGPL3

关于LGPL http://www.oschina.net/bbs/thread/2663

参考资料

http://canvasxpress.org/documentation.html

  评论这张
 
阅读(783)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017