d3.js——樹狀圖的繪製
阿新 • • 發佈：2019-01-05
樹狀圖和叢集圖其實差不多，就一點點不一樣，見下圖：
圖（1）：叢集圖——d3.layout.cluster()
圖（2）：樹狀圖——d3.layout.tree()
這樣一來差別就看出來了。由於兩者的程式碼差不多，這裡就直接附上樹狀圖原始碼，不多加解釋咯~
city.json檔案：
{ "name":"中國", "children": [ { "name":"浙江" , "children": [ {"name":"杭州" }, {"name":"寧波" }, {"name":"溫州" }, {"name":"紹興" } ] }, { "name":"廣西" , "children": [ { "name":"桂林", "children": [ {"name":"秀峰區"}, {"name":"疊彩區"}, {"name":"象山區"}, {"name":"七星區"} ] }, {"name":"南寧"}, {"name":"柳州"}, {"name":"防城港"} ] }, { "name":"黑龍江", "children": [ {"name":"哈爾濱"}, {"name":"齊齊哈爾"}, {"name":"牡丹江"}, {"name":"大慶"} ] }, { "name":"新疆" , "children": [ {"name":"烏魯木齊"}, {"name":"克拉瑪依"}, {"name":"吐魯番"}, {"name":"哈密"} ] } ] }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>樹狀圖</title> </head> <style> .node circle{ fill:#fff; stroke:steelblue; stroke-width: 1.5px; } .node{ font: 12px sans-serif; } .link{ fill:none; stroke:#ccc; stroke-width: 1.5px; } </style> <body> <script src="d3.js"></script> <script src="js/tree.js"></script> </body> </html>
var width = 500, height = 500; //定義資料轉換函式 var tree = d3.layout.tree() .size([width,height-200]) //定義對角線生成器diagonal var diagonal = d3.svg.diagonal() .projection(function(d){return [d.y, d.x]}) //定義svg var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height) .append("g") .attr("transform","translate(40,0)") //讀取json檔案，進行繪圖 d3.json("city.json",function(erro,root){ var nodes = tree.nodes(root); var links = tree.links(nodes); //畫點 var node = svg.selectAll(".node") .data(nodes) .enter() .append("g") .attr("class","node") .attr("transform",function(d){return "translate("+ d.y+","+ d.x+")"}) //加圈圈 node.append("circle") .attr("r",4.5) //加文字 node.append("text") .attr("dx",function(d){return d.children?-8:8;}) .attr("dy",3) .style("text-anchor", function (d) {return d.children?"end":"start"}) .text(function (d) {return d.name}) //畫線 var line = svg.selectAll("link") .data(links) .enter() .append("path") .attr("class","link") .attr("d",diagonal) })