文档章节

js插件spacetree使用

明了
 明了
发布于 2016/04/19 00:15
字数 715
阅读 63
收藏 0

源码地址

代码拷贝下来

下面的代码主要是去除了点击radio和修改了点击事件处理。修改成ajax请求数据的方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Spacetree - Tree Animation</title>

<!-- CSS Files -->
<link type="text/css" href="http://philogb.github.io/jit/static/v20/Jit/Examples/css/base.css" rel="stylesheet" />
<link type="text/css" href="http://philogb.github.io/jit/static/v20/Jit/Examples/css/Spacetree.css" rel="stylesheet" />

<!--[if IE]><script language="javascript" type="text/javascript" src="../../Extras/excanvas.js"></script><![endif]-->

<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="http://philogb.github.io/jit/static/v20/Jit/jit-yc.js"></script>


</head>

<body onload="init();">
<div id="container">



<div id="center-container">
    <div id="infovis"></div>    
</div>





</div>


<!-- Example File -->
<!-- <script language="javascript" type="text/javascript" src="http://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.js"></script> -->

<!-- <script type="text/javascript" src="data.js"></script> -->

<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
<script type="text/javascript">
var labelType, useGradients, nativeTextSupport, animate;

(function() {
  var ua = navigator.userAgent,
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      typeOfCanvas = typeof HTMLCanvasElement,
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
      textSupport = nativeCanvasSupport 
        && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
  //I'm setting this based on the fact that ExCanvas provides text support for IE
  //and that as of today iPhone/iPad current text support is lame
  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
  nativeTextSupport = labelType == 'Native';
  useGradients = nativeCanvasSupport;
  animate = !(iStuff || !nativeCanvasSupport);
})();




function init(){
    //init data

    //end
    //init Spacetree
    //Create a new ST instance
    var st = new $jit.ST({
        //id of viz container element
        injectInto: 'infovis',
        //set duration for the animation
        duration: 800,
        //set animation transition type
        transition: $jit.Trans.Quart.easeInOut,
        //set distance between node and its children
        levelDistance: 50,
        //enable panning
        Navigation: {
          enable:true,
          panning:true
        },
        //set node and edge styles
        //set overridable=true for styling individual
        //nodes or edges
        Node: {
            height: 20,
            width: 60,
            type: 'rectangle',
            color: '#aaa',
            overridable: true
        },
        
        Edge: {
            type: 'bezier',
            overridable: true
        },
        
        onBeforeCompute: function(node){
           // Log.write("loading " + node.name);
        },
        
        onAfterCompute: function(){
            //Log.write("done");
        },
        
        //This method is called on DOM label creation.
        //Use this method to add event handlers and styles to
        //your node.
        onCreateLabel: function(label, node){
            label.id = node.id;            
            label.innerHTML = node.name;
            label.onclick = function(){
                st.onClick(node.id);
             /*if(normal.checked) {
              
             } else {
              st.setRoot(node.id, 'animate');
             }*/
            };
            //set label styles
            var style = label.style;
            style.width = 60 + 'px';
            style.height = 17 + 'px';            
            style.cursor = 'pointer';
            style.color = '#333';
            style.fontSize = '0.8em';
            style.textAlign= 'center';
            style.paddingTop = '3px';
        },
        
        //This method is called right before plotting
        //a node. It's useful for changing an individual node
        //style properties before plotting it.
        //The data properties prefixed with a dollar
        //sign will override the global node style properties.
        onBeforePlotNode: function(node){
            //add some color to the nodes in the path between the
            //root node and the selected node.
            if (node.selected) {
                node.data.$color = "#ff7";
            }
            else {
                delete node.data.$color;
                //if the node belongs to the last plotted level
                if(!node.anySubnode("exist")) {
                    //count children number
                    var count = 0;
                    node.eachSubnode(function(n) { count++; });
                    //assign a node color based on
                    //how many children it has
                    node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                    
                }
            }
        },
        
        //This method is called right before plotting
        //an edge. It's useful for changing an individual edge
        //style properties before plotting it.
        //Edge data proprties prefixed with a dollar sign will
        //override the Edge global style properties.
        onBeforePlotLine: function(adj){
            if (adj.nodeFrom.selected && adj.nodeTo.selected) {
                adj.data.$color = "#eed";
                adj.data.$lineWidth = 3;
            }
            else {
                delete adj.data.$color;
                delete adj.data.$lineWidth;
            }
        }
    });
    //load json data
    $.getJSON("data.js",function(data){
     st.loadJSON(data);
     //compute node positions and layout
     st.compute();
     //optional: make a translation of the tree
     st.geom.translate(new $jit.Complex(-200, 0), "current");
     //emulate a click on the root node.
     st.onClick(st.root);
    })
    
    //end
    //Add event handlers to switch spacetree orientation.
    //end

}

</script>
</body>
</html>

改造成 ajax的方式,data.js就是源文件的json数据格式。注意拷贝的时候,把最后一个";"去掉。结构类似

{"id": "node02","name": "0.2",
        "data": {},
        "children": [{
            "id": "node13",
            "name": "1.3",
            "data": {},
            "children": [{
                "id": "node24",
                "name": "2.4",
                "data": {},
                "children": [{
                    "id": "node35",
                    "name": "3.5",
                    "data": {},
                    "children": [{
                        "id": "node46",
                        "name": "4.6",
                        "data": {},
                        "children": []
                    }]
                }]}}


© 著作权归作者所有

明了
粉丝 1
博文 50
码字总数 48789
作品 0
厦门
程序员
私信 提问
使用Javascript来实现的超炫组织结构图(Organization Chart)

最近有个内部项目需要使用组织结构图(organization chart), 寻找了一些开源的项目及其类库,发现竟然没有现成的JS类库可以使用,找到一些简单的JS实现,不过界面及其操作及其简单,不过功夫...

gbin1
2011/06/29
1K
3
spacetree中offsetX属性的使用

JavaScript InfoVis Toolkit的资料怎么这么少?除了官网就没有看到其他地方的东西了 在spacetree中,offsetX和offsetY可以控制出来的大小,但是希望在点击某些节点的时候设置不同的offset应该...

流海
2013/07/08
641
1
构建 Ext JS 扩展和插件

Ext JS 框架是以一种使它易于扩展的方式构建的。Ext JS 扩展允许开发人员创建衍生自现有 Ext JS 的新类,允许新类同时使用它拥有的新方法和它所扩展的类的方法。Ext JS 插件架构支持开发人员...

IBMdW
2011/11/10
767
1
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
3.3K
5
Js资源增量更新--seajs本地存储增量更新插件(storeinc)使用

Js资源增量更新--seajs本地存储增量更新插件(storeinc)使用 storeinc 是一个用来实现js代码本地存储化,并可以在js版本更新的时候,对js内容做增量更新的seajs插件。对于一个js文件来说,当j...

卢勇福
2013/10/14
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
3
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
2
0
JAVA 利用时间戳来判断TOKEN是否过期

import java.time.Instant;import java.time.LocalDateTime;import java.time.ZoneId;import java.time.ZoneOffset;import java.time.format.DateTimeFormatter;/** * @descri......

huangkejie
昨天
2
0
分页查询

一、配置 /*** @author beth* @data 2019-10-14 20:01*/@Configurationpublic class MybatisPlusConfig { @Bean public PaginationInterceptor paginationInterceptor(){ ......

一个yuanbeth
昨天
6
0
在LINQPad中使用Ignite.NET

LINQPad是进行.NET开发的一款优秀工具,非常有利于Ignite.NET API的快速入门。 入门 下载LINQPad:linqpad.net/Download.aspx,注意要选择64位操作系统的AnyCPU版本; 安装Ignite.NET的NuGet...

李玉珏
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部