tree.min.js

$(document).ready(function(){function v(e,t){var n=r;if(panTimer){clearTimeout(panTimer);translateCoords=d3.transform(T.attr("transform"));if(t=="left"||t=="right"){translateX=t=="left"?translateCoords.translate[0]+n:translateCoords.translate[0]-n;translateY=translateCoords.translate[1]}else if(t=="up"||t=="down"){translateX=translateCoords.translate[0];translateY=t=="up"?translateCoords.translate[1]+n:translateCoords.translate[1]-n}scaleX=translateCoords.scale[0];scaleY=translateCoords.scale[1];scale=g.scale();T.transition().attr("transform","translate("+translateX+","+translateY+")scale("+scale+")");d3.select(e).select("g.node").attr("transform","translate("+translateX+","+translateY+")");g.scale(g.scale());g.translate([translateX,translateY]);panTimer=setTimeout(function(){v(e,n,t)},50)}}function m(){T.attr("transform","translate("+d3.event.translate+")scale("+d3.event.scale+")")}function y(e,n){t=e;T.selectAll("g.node").sort(function(e,n){if(e.id!=t.id)return 1;else return-1});if(nodes.length>1){links=p.links(nodes);nodePaths=T.selectAll("path.link").data(links,function(e){return e.target.id}).remove();addNodesExit=T.selectAll("g.add_node").data(links,function(e){return e.source.id+"-"+e.target.id}).remove();var r=e.parent.id+"-"+e.id;addNodesExit=T.selectAll("g.add_node").filter(function(e){var t=e.source.id+"-"+e.target.id;return t==r}).remove();nodesExit=T.selectAll("g.node").data(nodes,function(e){return e.id}).filter(function(e,n){if(e.id==t.id){return false}return true}).remove()}parentLink=p.links(p.nodes(t.parent));T.selectAll("path.link").filter(function(e,n){if(e.target.id==t.id){return true}return false}).remove();dragStarted=null}function w(){e=null;d3.selectAll(".ghostCircle").attr("class","ghostCircle");d3.select(domNode).attr("class","node");d3.select(domNode).select(".ghostCircle").attr("pointer-events","");if(t!==null){L(a);t=null}}function N(e,t){var n=this.getBBox();var r=d3.select(this.parentNode).append("svg:rect").attr("x",n.x).attr("y",n.y).attr("width",n.width).attr("height",n.height).style("fill","#ccc").style("fill-opacity",".3").style("stroke","#111").style("stroke-width","0.3px");e.topTextHeight=n.height}function C(e,t){var n=this.getBBox();var r=d3.select(this.parentNode).append("svg:rect").attr("x",n.x).attr("y",n.y).attr("width",n.width).attr("height",n.height).style("fill","#ccc").style("fill-opacity",".3").style("stroke","#111").style("stroke-width","0.3px");e.downTextHeight=n.height}function k(e){var t=e.append("g").attr("class","node_new");t.filter(function(e){return!e.children||0==e.children.length}).append("svg:line").attr("class","link_new").attr("id",function(e){return"link_"+e.id+"_new"}).attr("style",function(e){var t=e.image;return"stroke: "+O(t)+";"}).attr("x1",0).attr("y1",function(e){return f/2+(e.downTextHeight||0)}).attr("x2",0).attr("y2",function(e){return c+f/2});t.filter(function(e){return!e.children||0==e.children.length}).append("image").attr("xlink:href","images/add_node.png").attr("x",-9).attr("y",c+f/2-9).attr("width",18).attr("height",18).attr("class","add_node").on("click",function(e){A(e,null)});t.filter(function(e){return!e.children||0==e.children.length}).append("circle").attr("class","ghostCircle").attr("cx",0).attr("cy",c+f/2).attr("r",20).attr("pointer-events","mouseover").on("mouseover",function(e){E(e)}).on("mouseout",function(e){S(e)})}function L(e){var t=p.nodes(e).reverse();var n=p.links(t);var r=0;t.forEach(function(e){e.y+=f;if(e.x<r){r=e.x}});t.forEach(function(e,t){e.x+=-r+l});var i=T.selectAll("g.node").data(t,function(e,t){return e.id});var s=i.enter().append("g").call(dragListener).attr("class","node").attr("transform",function(e){return"translate("+e.x+","+e.y+")"});var o=s.append("g").attr("class","node_info").on("click",function(e){alert(e.id+" : "+e.image+" clicked")});o.append("image").attr("xlink:href",function(e){return"images/"+e.image}).attr("x",-l/2).attr("y",-f/2).attr("width",l).attr("height",f);o.filter(function(e){return e.title}).append("text").attr("dx",0).attr("dy",-(f/2+4)).style("text-anchor","middle").text(function(e){return e.title}).each(N);o.filter(function(e){return e.description}).append("text").attr("dx",0).attr("dy",f/2+10).style("text-anchor","middle").html(function(e){return e.description}).each(C);k(s.filter(function(e){return!e.children||0==e.children.length}));var u=i.transition().duration(h).attr("transform",function(e){return"translate("+e.x+","+e.y+")"});i.selectAll("g.node_new").filter(function(e){return e.children&&e.children.length>0}).transition().duration(h).remove();k(i.filter(function(){return d3.select(this).select("g.node_new").empty()}).filter(function(e){return!e.children||0==e.children.length}));var a=i.exit().transition().duration(h).remove();var c=T.selectAll(".link").data(n,function(e,t){return e.source.id+"-"+e.target.id});c.enter().append("svg:path").attr("class","link").attr("id",function(e){return"link_"+e.source.id+"_"+e.target.id}).attr("style",function(e){var t=e.source.image;return"stroke: "+O(t)+";"}).attr("d",d);c.transition().duration(h).attr("d",d);c.exit().transition().remove();var v=T.selectAll("g.add_node_link").data(n,function(e){return e.source.id+"-"+e.target.id});v.enter().append("svg:g").attr("class","add_node add_node_link").attr("transform",function(e){return"translate("+((e.target.x+e.source.x)/2-9)+","+((e.target.y+e.source.y)/2-9)+")"}).append("image").attr("xlink:href","images/add_node.png").attr("x",0).attr("y",0).attr("width",18).attr("height",18).on("click",function(e){A(e.source,e.target)});v.transition().duration(h).attr("transform",function(e){return"translate("+((e.target.x+e.source.x)/2-9)+","+((e.target.y+e.source.y)/2-9)+")"});v.exit().remove()}function A(e,t){var n=!t||d3.event.altKey?false:true;var r=["dtmf.png","call.png","call_link.png","check_direction.png","goto.png","goto_tree.png"];d3.shuffle(r);var i={id:"new_"+u++,image:r.shift(),children:[]};if(!e.children){e.children=[]}if(!n){e.children.push(i)}else{i.children.push(t);e.children.forEach(function(n,r){if(n.id==t.id){e.children[r]=i}})}L(a)}function O(e){if("check_direction.png"==e){return"#E65639"}else if("dtmf.png"==e){return"#E9C831"}else if("goto.png"==e||"goto_tree.png"==e){return"#6CBE35"}else{return"#2A98D0"}}var e=null;var t=null;var n=false;var r=200;var i=20;var s=1200,o=3e3;var u=1;var a;var f=68,l=68;var c=30;var h=200;var p=d3.layout.tree().nodeSize([100,180]);var d=d3.svg.diagonal().source(function(e){return{x:e.source.x,y:e.source.y+f/2+(e.source.downTextHeight||0)}}).target(function(e){return{x:e.target.x,y:e.target.y-f/2-(e.target.topTextHeight||0)}});var g=d3.behavior.zoom().scaleExtent([.1,3]).on("zoom",m);var b=d3.select("#chart-inner").append("svg").attr("width",s).attr("height",o).attr("class","overlay").call(g);dragListener=d3.behavior.drag().on("dragstart",function(e){if(e==a){return}dragStarted=true;nodes=p.nodes(e);d3.event.sourceEvent.stopPropagation()}).on("drag",function(e){if(e==a){return}if(dragStarted){domNode=this;y(e,domNode);n=true}relCoords=d3.mouse($("svg").get(0));if(relCoords[0]<i){panTimer=true;v(this,"left")}else if(relCoords[0]>$("svg").width()-i){panTimer=true;v(this,"right")}else if(relCoords[1]<i){panTimer=true;v(this,"up")}else if(relCoords[1]>$("svg").height()-i){panTimer=true;v(this,"down")}else{try{clearTimeout(panTimer)}catch(t){}}e.x=d3.event.x;e.y=d3.event.y;var r=d3.select(this);r.attr("transform","translate("+e.x+","+e.y+")");x()}).on("dragend",function(r){if(r==a){return}n=false;domNode=this;if(e){var i=t.parent.children.indexOf(t);if(i>-1){t.parent.children.splice(i,1)}if(typeof e.children!=="undefined"){e.children.push(t)}else{e.children=[];e.children.push(t)}w()}else{w()}});var E=function(t){e=t;x()};var S=function(t){e=null;x()};var x=function(){if(n){d3.select(domNode).select(".ghostCircle").attr("pointer-events","none");d3.selectAll(".ghostCircle").attr("class","ghostCircle show");d3.select(domNode).attr("class","node activeDrag");if(e!==null){d3.selectAll(".ghostCircle").filter(function(t){return t.id==e.id}).attr("class","ghostCircle show focused")}}};var T=b.append("g");d3.json("data.json",function(e,t){a=t;L(a)})})