JavaScript来实现的超炫组织结构图

Javascript InfoVis tools

这个开源的javascript类库可以生成非常炫酷的结构和图形，我选择了其中的一种spacetree类型做为我的组织结构图基础，这种图形可以支持一下特性：

◆ 支持向上下左右四个方向展开图表

◆ 支持子节点扩展

◆ 支持图表拖放

◆ 支持图表缩放

整个类库异常强大，非常合适复杂的图形功能需求，如下：

//Create a new instance  
    var st = new $jit.ST({  
        'injectInto': 'orgchart',  
        //set duration for the animation  
        duration: 800,  
        //set animation transition type  
        transition: $jit.Trans.Quart.easeInOut,  
        levelDistance: 50,  
        levelsToShow: 1,  
        Node: {  
            height: 45,  
            width: 120,  
            type: 'nodeline',  
            color:'#23A4FF',  
            lineWidth: 2,  
            align:"center",  
            overridable: false 
        },  
          
        Edge: {  
            type: 'bezier',  
            lineWidth: 2,  
            color:'#23A4FF',  
            overridable: true 
        },  
          
    //Retrieve the json data from database and create json objects for org chart  
        request: function(nodeId, level, onComplete) {  
        
      //Generate sample data  
      if(nodeId!='peter wang'&&nodeId!='William chen'){  
        var data= [{fullname:'peter wang',title:'engineer'},{fullname:'William chen',title:'senior engineer'}];  
        var objs = [];  
        for(var i=0;i
          var tmp = data[i];  
          var obj = {"id":data[i].fullname, "name": "" + data[i].fullname+"