Force map on D3 official website

Force map finishing on D3 official website

Its code:

/** @Author: Administrator * @Date: 2015-11-18 15:45:55 * @Last Modified by:administrator * @Last Modified time: 2015-11-27 11:49:48*/' Use strict ';varForcetree =function(setting) {D3.select (setting.selector). SelectAll (' SVG '). Remove ()varselector =Setting.selector, Tempseries=setting.series, Series=Setting.series, W= Document.queryselector (selector). Getboundingclientrect (). Width * 0.9, H= Document.queryselector (selector). Getboundingclientrect (). Height * 0.9, node, link, rootvarforce =D3.layout.force (). On ("Tick", tick). Charge (function(d) {returnD.children? -D.SIZE/100:-300; })        /*. Linkdistance (function (d) {return d.children? 1000:30; })*/. Size ([w, H-320])    varVis = D3.select (selector). Append ("Svg:svg"). attr ("Width", W). attr ("Height", h)//Start itRoot=series Startroot (Root)functionStartroot (Root) {root.fixed=trueRoot.x= W/2Root.y= H/2 + 100update ()}functionUpdate () {D3.selectall (' Line '). Remove () D3.selectall (' Circle '). Remove ()varnodes =Flatten (root), links=D3.layout.tree (). Links (nodes)//Restart the force layout.Force . Nodes (nodes). Links (links). Start ()//Update the links ...link = vis.selectall ("Line.link"). Data (links,function(d) {returnd.target.id})//Enter any new links.Link.enter (). Insert ("Svg:line", ". Node"). attr ("Class", "link"). attr ("X1",function(d) {returnd.source.x}). attr (' Stroke ', ' #fff '). attr ("Y1",function(d) {returnd.source.y}). attr ("X2",function(d) {returnd.target.x}). attr ("Y2",function(d) {returnD.target.y})//Exit any old links.link.exit (). remove (); //Update the Nodes ...node = Vis.selectall ("Circle.node"). Data (nodes,function(d) {returnd.id}). Style ("Fill", ' green '); Node.transition (). attr ("R",function(d) {return10            })        //Enter any new nodes.Node.enter (). Append ("Svg:circle"). attr ("Class", "Node"). attr ("CX",function(d) {returnd.x}). attr ("Cy",function(d) {returnd.y}). attr ("R",function(d) {if(D.type = = = ' Project ') {                    return15                } Else if(D.type = = = ' Company ') {                    return10                } Else {                    return5}}). Style ("Fill",function(d, i) {if(D.type = = = ' Project ') {                    return' Red '                } Else if(D.type = = = ' Company ') {                    return' Green '                } Else {                    return' Pink '}}). attr (' Class ',function(d, i) {$ ( This). Data (' info ', D)return' Circle #circle ' +D.index}). On ("Click.first", click). On (' Click.second ', Createchild). Call (Force.drag) Node.exit (). Remove ()}functiontick () {link.attr ("X1",function(d) {returnd.source.x; }). attr ("Y1",function(d) {returnd.source.y; }). attr ("X2",function(d) {returnD.target.x; }). attr ("Y2",function(d) {returnD.target.y;        }); Node.attr ("CX",function(d) {returnd.x; }). attr ("Cy",function(d) {returnD.y;    }); }    functionClick (d) {if(d.children) {D._children=D.children; D.children=NULL; } Else{D.children=D._children; D._children=NULL; } update ()}functionFlatten (root) {varnodes =[], I= 0; functionrecurse (node) {if(node.children) node.size = Node.children.reduce (function(P, v) {returnP +recurse (v); }, 0); if(!node.id) Node.id = + +i;            Nodes.push (node); returnnode.size; } root.size=recurse (root); returnnodes; }    functionCreatechild (d) {/*$.ajax ({url: ' Data/flare2.json ', type: ' GET ', DataType: ' JSON ', success : function (data) {}})*/    }    //End Createchild}

Force map on D3 official website