jquery org chart plug-in (based on JIT-YC to do drag, adaptive scaling OrgChart)

A OrgChart structure diagram demo based on jquery JIT-YC plugin implementation

First, background processing is required to transfer JSON data,

var json = {"id": 1, "name": "Group headquarters", "data": {' desc ': ' profile ', ' link ': ' http://www.baidu.com '}, ' Children ': [
            {"id": "Name": "Property Company", "data": {' desc ': ' profile ', ' link ': ' Http://www.baidu.com '},
                    "Children": [{"id":], "name": "Finance 1",
						"Data": {' desc ': ' profile ', ' link ': ' http://www.baidu.com '}, ' children ': [{' id ': ' 1 ', ' name ': "Department 1", "Data": {' desc ': ' profile ', ' link ': ' Http://www.baidu.com '}}, {"id": "" Name ":" 1 2 "," data ": {' d
                    Esc ': ' Profile ', ' link ': ' Http://www.baidu.com '}}]}, {"id": 21,
						"Name": "Finance 2", "data": {' desc ': ' profile ', ' link ': ' http://www.baidu.com '}, ' children ': [{
                "id": "Name": "2 department 1", "data": {' desc ': ' profile ', ' link ': ' Http://www.baidu.com '}}]
      },
            ]  }, {"id": one, "name": "Construction Company", "data": {' desc ': ' profile ', ' link ': ' Http://www.baidu . com '}, "Children": [{"id":], "name": "Admin Department", "data": {' desc ': ' profile ', ' link ': ' http://www.baidu.com '}}]}, {"id": "Name": "Decoration Company", "data": {' desc ': ' profile ', ' link ': ' http://www.baidu.com '}, ' Children ': []}]};

Then, the main JS function (is also the full content of newchart.js),

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 '), TE Xtsupport = Nativecanvassupport && (typeof document.createelement (' canvas '). GetContext (' 2d '). Filltext = =
  ' function '); I ' m setting this based on the fact so Excanvas provides text support for IE//and, as of today Iphone/ipad Curre NT text support is lame Labeltype = (!nativecanvassupport | | (Textsupport &&!istuff))?
  ' Native ': ' HTML ';
  Nativetextsupport = Labeltype = = ' Native ';
  Usegradients = Nativecanvassupport; Animate =!
(Istuff | |!nativecanvassupport);

})();
    var Log = {elem:false, write:function (text) {if (!this.elem) This.elem = document.getElementById (' Log ');
    This.elem.innerHTML = text; This.elem.style.left = (docuMent.body.clientwidth-this.elem.offsetwidth)/2 + ' px ';

}
}; function init () {//init data var json = {"id": 1, "name": "Group headquarters", "data": {' desc ': ' profile ', ' link ': ' http://www . Baidu.com '}, "Children": [{"id": Ten, "Name": "Property Company", "data": {' desc ': ' Jane
                    Interface ', ' link ': ' http://www.baidu.com '}, ' children ': [{' id ': 20,
						"Name": "Finance 1", "data": {' desc ': ' profile ', ' link ': ' http://www.baidu.com '}, ' children ': [{
						"id": "Name": "1 Department 1", "data": {' desc ': ' profile ', ' link ': ' Http://www.baidu.com '}}, {"id": 31,
                    "Name": "1 2", "data": {' desc ': ' profile ', ' link ': ' Http://www.baidu.com '}}]}, { "id": "Name": "Finance 2", "data": {' desc ': ' Introduction ', ' link ': ' http://www.b
						Aidu.com '}, "Children": [{"id": 2, "name": "Department 1",' Data ': {' desc ': ' profile ', ' link ': ' Http://www.baidu.com '}} '},}, {
            "id": one, "name": "Construction Company", "data": {' desc ': ' profile ', ' link ': ' Http://www.baidu.com '},
        "Children": [{"id": "Name": "Administrative department", "data": {' desc ': ' profile ', ' link ': ' Http://www.baidu.com '}}] }, {"id": "Name": "Decoration Company", "data": {' desc ': ' Introduction ', ' link ': ' Http://www.baid
    U.com '}, ' Children ': []}]}; 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, width:1000, Hei ght:400, Background:true,//enablePanning navigation: {enable:true, panning:true},//set node and edge styles
            Set overridable=true for styling individual//nodes or edges Node: {height:45,
        
        width:122, type: ' Rectangle ', color: ' #fff ', overridable:true}, Edge: {type: ' Bézier ', overridable:true}, Onbeforecompu  Te:function (node) {log.write ("Loading ...")
        "+ node.name);
        }, Onaftercompute:function () {log.write ("done");
        //this is called on DOM label creation.
        Use the To add event handlers and styles to//your node. Oncreatelabel:function (label, node) {var hassub= $jit.
			Graph.Util.getSubnodes (node,1);
				if (hassub.length) {var txt= ' >> '; label.innerhtml = "
 

 

Official online has a relatively simple case code, there are relatively perfect point, see: http://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example1.html

Before actually was discovered this demo,http://www.gbtags.com/technology/javascript/jsorgchart/orgchart.html first, here is the JSON processing, the default display two level.

demo:http://pan.baidu.com/s/1o69uo7c