人员树状图

html文件： 引入twaver的demo.js js文件：

twaver.Util.registerImage("clip_pic", { w: 128, h: 128, cache: false, clip: { shape: "path", data: "M-45,-25Q-45,-64,0,-64Q45,-64,45,-25L45,25Q45,64,0,64Q-45,64,-45,25z" }, v: [ { shape: "image", x: -64, y: -64, name: '<%=getClient("pic")%>' } ] }); // twaver.Util.registerImage("employee", { w: 200, h: 135, cache: false, origin: { x: 0, y: 0 }, v: [ { shape: "rect", w: "100%", h: "100%", r: 8, lineColor: "black", lineWidth: 2.5, //框框背景图片 fill: "rgba(255,255,255,.6)" }, { shape: "image", name: "clip_pic", x: 60, y: "50%" }, { shape: "path", data: "M-45,-25Q-45,-64,0,-64Q45,-64,45,-25L45,25Q45,64,0,64Q-45,64,-45,25z", // 图片边框 lineColor: "#216396", lineWidth: 1, translate: { x: 60, y: 135 / 2 } }, { shape: "text", text: '<%=getClient("text")%>', font: '12px "Microsoft Yahei"', // color: "#fff", translate: { x: 150, y: 135 / 2 } } ] }); window.onload = dealData; var no = 0; function dealData() { $.ajax({ type: "get", url: baseUrl + "saftyScreenController.do?saftyMan", data: { workNo: workNo }, success: function(data) { if (data.respCode == "200") { var box = new twaver.ElementBox(); // 画布 var network = new twaver.vector.Network(box); var layout = new twaver.layout.AutoLayouter(box); network.layoutType = "topbottom"; $(".personlist")[0].appendChild(network.getView()); network.adjustBounds({ width: $(".personlist")[0].clientWidth, height: $(".personlist")[0].clientHeight }); var infos = data.obj; for (var i = 0; i < infos.length; i++) { var info = infos[i]; console.log("father", info); var node0 = new twaver.Node("n" + no); node0.setImage("employee"); node0.setClient("pic", info.pic); node0.setClient("text", info.name); box.add(node0); no = no + 1; var children = info.children; if (children.length > 0) { dealChild(node0, children, box); } } network.zoomOverview(); layout.doLayout(network.layoutType, function() { network.zoomOverview(); }); network.moveSelectedElements = function(a, b, c, d) {}; } } }); } function dealChild(node0, children, box) { for (var i = 0; i < children.length; i++) { child = children[i]; var node1 = new twaver.Node("n" + no); node1.setImage("employee"); node1.setClient("pic", child.pic); node1.setClient("text", child.name); box.add(node1); var link = new twaver.Link(node0, node1); box.add(link); link.setStyle("link.type", "orthogonal.vertical"); link.setStyle("link.color", "#555555"); link.setStyle("link.xradius", 0); link.setStyle("link.yradius", 0); link.setStyle("link.width", 1.5); no = no + 1; var children1 = child.children; if (children1.length > 0) { dealChild(node1, children1, box); } } }

数据格式：

obj = [ { name: "朱伟", workNo: "0001", deptNum: "0001", deptName: "01", pic: "pic1.jpg", children: [ { name: "朱伟", workNo: "0001", deptNum: "0001", deptName: "01", pic: "pic1.jpg", children: [ { name: "朱伟", workNo: "0001", deptNum: "0001", deptName: "01", pic: "pic1.jpg", children: [] }, { name: "朱伟", workNo: "0001", deptNum: "0001", deptName: "01", pic: "pic1.jpg", children: [] } ] }, { name: "朱伟", workNo: "0001", deptNum: "0001", deptName: "01", pic: "pic1.jpg", children: [ { name: "朱伟", workNo: "0001", deptNum: "0001", deptName: "01", pic: "pic1.jpg", children: [] }, { name: "朱伟", workNo: "0001", deptNum: "0001", deptName: "01", pic: "pic1.jpg", children: [] } ] } ] } ];