组织机构图

Author Avatar
Serical 8月 10, 2017
  • 在其它设备中阅读本文章

一、组件选择

  1. JIT-SpaceTreeAPI
  2. d3.js

二、备用代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js_lib/jit/Spacetree.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js_lib/jit/base.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/js_lib/jit/jit-yc.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.0.min.js"></script>

    <script type="text/javascript">

        $(function () {
            init();
        });

        function init(){
            //init data
            var json = {
                id: "node0",
                name: "中国人民银行",
                children: [{
                    id: "node1",
                    name: "董事会",
                    children: [{
                        id: "node3",
                        name: "董事长",
                        children: [{
                            id: "node5",
                            name: "行长",
                            children: ${root}
                        }]
                    }]
                }, {
                    id: "node2",
                    name: "监事会",
                    data: {},
                    children: [{
                        id: "node4",
                        name: "监事长"
                    }]
                }]
            };
            //end
            //init Spacetree
            //Create a new ST instance
            var st = new $jit.ST({
                orientation: 'top', // 根节点在最上面模式
                constrained: false, // 配合levelsToShow,显示所有层级的节点
                levelsToShow: 10, // 注意div[infovis]的高度宽度
                offsetY: 200,
                //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: 90,
                    width: 20,
                    type: 'rectangle',
                    color: '#aaa', // 动画框的颜色
                    overridable: true
                },

                Edge: {
                    type: 'bezier',
                    overridable: true
                },
                //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;
                    //set label styles
                    var style = label.style;
                    style.width = 17 + 'px';
                    style.height = 90 + 'px';
                    style.cursor = 'pointer';
                    style.color = '#333'; // 字体颜色
                    style.fontSize = '0.8em';
                    style.textAlign= 'center';
                    style.paddingTop = '3px';

                    if(label.id == "node0") {
                        style.width = 150 + 'px'; // 根节点文字宽度
                        style.height = 20 + 'px'; // 根节点文字高度
                    }
                },

                //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 = "#aaa"; // 根节点颜色
                        node.data.$width = 150; // 根节点动画宽度
                        node.data.$height = 20; // 根节点动画高度
                    }
                    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
            st.loadJSON(json);
            //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);
        }

    </script>
</head>
<body>
    <div id="infovis" style="width: 100%;height: 100%;"></div>
</body>
</html>