【d3.js教程08】集群圖cluster · D3.js征途

![](https://box.kancloud.cn/2016-04-19_57161005cce0a.jpg) ~~~ <!DOCTYPE html> <html> <head> <script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <meta charset="utf-8"> <title></title> <style type="text/css"> .node{ fill:white; /*白色填充*/ stroke:red; /*紅色邊界*/ stroke-width: 1px; } text{ font-size: 10px; word-spacing: 0px; letter-spacing: 0px; } .link{ fill:none; /*這句很關鍵，要不曲線會很丑*/ } </style> </head> <body> <svg></svg> <script type="text/javascript"> var width=200; var height =200; var svg = d3.select("svg"); svg.attr("width",1000) .attr("height",1000) .attr("x",100) .attr("y",100); var cluster = d3.layout.cluster() //默認生成的樹形結構是豎直方向 .size([width,height]); //這里要設置合理，控制展現區域的寬高 var diagonal = d3.svg.diagonal() //對角線生成器將線條進行處理需要和path綁定 .projection(function(d) { return [d.y+100, d.x]; }); d3.json("json/jiqun.json",function(error,root){ var nodes = cluster.nodes(root); //生成節點 var links = cluster.links(nodes); //生成連線 console.log(links); /*畫線線*/ var link = svg.selectAll(".link") .data(links) .enter() .append("path") .attr("class","link") .style("stroke","#ccc") .style("stroke-width",1) .attr("d",diagonal); //對數據源進行處理并畫出來 /*畫圈圈詛咒你*/ var circles = svg.selectAll(".node") .data(nodes) .enter() .append("g") //要給加class 需要用g .append("circle") //給每個g添加circle .attr("r",4) .attr("class","node") .attr("transform",function(d,i){ return "translate("+(d.y+100)+","+d.x+")"; //將坐標移動到指定的點并且x,y對調 }); /*寫文字*/ var texts = svg.selectAll("text") .data(nodes) .enter() .append("text") .style("fill","black") .attr("transform",function(d,i){ var temp = d.children?-12:12;//注意這里根據他有沒有孩子節點來設置它的方位 var y = d.y+temp; return "translate("+(y+100)+","+d.x+")"; }) .text(function(d,i){ return d.name; }); }); </script> </body> </html> ~~~