d3.js学习笔记-10(布局：树状图、集群图捆、捆图)
生活随笔
收集整理的這篇文章主要介紹了
d3.js学习笔记-10(布局：树状图、集群图捆、捆图)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
d3.js學習筆記-10
目錄
- d3.js學習筆記-10
- 1 樹狀圖
- 2 集群圖
- 2.1 simple example
- 2.2 example：圓形集群圖
- 3 捆圖
- References
1 樹狀圖
在區域內按規則布置節點，再用連線將節點連接起來，最終的圖表形似一顆樹桿- d3.layout.tree()：創建一個樹狀圖布局
- tree.size([width, height])：設定或獲取尺寸，參數size是只有兩個元素的數組，分別表示寬和高。
- tree.nodeSize([nodeSize])：設定或獲取各節點的大小，以數組的形式:[x,y]
- tree.value([value])：設定或獲取值訪問器，默認為null。如果使用了此函數，各節點會多一個value屬性。
- tree.children([children])：設定或獲取子節點訪問器。默認情況下，認為當前節點的變量children是子節點。
- tree.sort([comparator])：設定或獲取排序的比較器。
- tree.separation([separation])：設定或獲取相鄰節點之間的間隔。
- tree.nodes(root)：根據root進行計算，獲取節點數組，節點包含的屬性有：parent(父節點)、children(子節點)、depth(深度)、x(x坐標)、 y(y坐標)。
- tree.links(nodes)：根據nodes進行計算，獲取連線數組，連線包含的屬性有：source(源節點)、target(目的節點)。
example
首先創建一個json文件，名稱為city.json，將文件放置在項目文件下（任何一個位置都可以，只需要路徑寫正確就可以），內容如下：
再創建一個html文件，添加以下內容
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title></title><script src="../d3.v3.min.js"></script> </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>var width = 600;var height = 600;// 創建一個畫布var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);// 創建一個g元素，用于樹狀圖var gTree = svg.append("g").attr("transform", "translate(40,0)");// 創建一個樹狀圖布局var tree = d3.layout.tree().size([width, height - 200]) // 設置尺寸.separation(function (a, b) { return (a.parent == b.parent ? 1 : 2); }); // 定義相鄰節點的間隔，參數為函數// 對角線生成器// projection作用于每一個節點也就是說其x坐標和y坐標將被對調// 這樣就能制成一個橫向的樹狀圖var diagonal = d3.svg.diagonal().projection(function (d) { return [d.y, d.x]; });// 讀取json文件中的數據：d3.json()d3.json("city.json", function (error, root) {var nodes = tree.nodes(root); //根據root進行計算，得到節點數組var links = tree.links(nodes);//根據nodes進行計算，得到連線數組console.log(nodes);console.log(links);// 添加連線var link = gTree.selectAll(".link").data(links) // 綁定數據.enter().append("path").attr("class", "link").attr("d", diagonal); //連線使用對角線生成器，將x y對調// 添加節點var node = gTree.selectAll(".node").data(nodes) //綁定數據.enter().append("g") // 將每一個系欸但放到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; });});</script> </body></html>
如果運行過程中，chrome瀏覽器報出跨域問題，可以試試這個方法
2 集群圖
類似于樹狀圖，布局中方法的意義和用法與樹狀圖相同，唯一的不同在于：所有葉子節點都被放置在相同的深度2.1 simple example
將上述樹狀圖中的d3.layout.tree修改為d3.layout.cluster，得到的結果如下：
2.2 example：圓形集群圖
{"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":"哈密"}]},{ "name":"西藏" , "children":[{"name":"呼和浩特"},{"name":"包頭"},{"name":"烏海"},{"name":"赤峰"}]},{ "name":"北京" , "children":[{"name":"東城區"},{"name":"西城區"},{"name":"海淀區"},{"name":"朝陽區"},{"name":"豐臺區"},{"name":"通州區"}]},{ "name":"上海" , "children":[{"name":"黃埔區"},{"name":"浦東新去"},{"name":"徐匯區"},{"name":"長寧區"},{"name":"靜安區"},{"name":"通州區"}]},{ "name":"四川" , "children":[{"name":"成都"},{"name":"綿陽"},{"name":"自貢"},{"name":"攀枝花"},{"name":"瀘州"},{"name":"德陽"}]},{ "name":"廣東" , "children":[{"name":"廣州"},{"name":"深圳","children":[{"name":"福田區"},{"name":"羅湖區"},{"name":"南山區"},{"name":"鹽田區"},{"name":"寶安區"},{"name":"龍崗區"}]},{"name":"珠海"},{"name":"汕頭"},{"name":"佛山"}]}]} <!DOCTYPE html> <html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title></title><script src="../d3.v3.min.js"></script> </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>// 1. 創建畫布// 2. 創建用于單個圖形的g元素// 3. 創建布局，設置大小/間隔// 4. 讀取數據// 5. 添加節點 添加連線：綁定數據 設置位置角度// 6. 為節點添加圓形// 7. 為節點添加文字var width = 600;var height = 600;// 創建一個畫布var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);// 創建一個g元素，用于集群圖var gCluster = svg.append("g")// 將圖形移至中心.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");// 創建一個樹狀圖布局var cluster = d3.layout.cluster()// 360表示360°范圍內，角度為順時針方向， 第二個參數表示半徑.size([360, height / 2 - 100]).separation(function (a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }); // 定義相鄰節點的間隔，參數為函數// 對角線生成器// projection作用于每一個節點也就是說其x坐標和y坐標將被對調// 這樣就能制成一個橫向的樹狀圖var diagonal = d3.svg.diagonal.radial().projection(function (d) {var radius = d.y, // 半徑angle = d.x / 180 * Math.PI; //角度return [radius, angle];});// 讀取json文件中的數據：d3.json()d3.json("city2.json", function (error, root) {var nodes = cluster.nodes(root); //根據root進行計算，得到節點數組var links = cluster.links(nodes);//根據nodes進行計算，得到連線數組console.log(nodes);console.log(links);// 添加連線var link = gCluster.selectAll(".link").data(links) // 綁定數據.enter().append("path").attr("class", "link").attr("d", diagonal); //連線使用對角線生成器，將x y對調// 添加節點var node = gCluster.selectAll(".node").data(nodes) //綁定數據.enter().append("g") // 將每一個系欸但放到g元素中.attr("class", "node").attr("transform", function (d) {// rorate是以x正方向為旋轉起點，布局是以y軸負方向為旋轉起點，兩者相差90°return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")";})// 節點添加圓形node.append("circle").attr("r", 4.5);// 節點添加文本node.append("text").attr("transform", function (d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; }).attr("dy", ".3em").style("text-anchor", function (d) { return d.x < 180 ? "start" : "end"; }).text(function (d) { return d.name; });});</script> </body></html>3 捆圖
捆圖需要與其他層級布局一起使用，采用嵌套結構，最常見的是和集群圖一起使用，集群圖計算節點位置，捆圖計算連線的路徑。- d3.layout.bundle()：創建一個捆圖布局
- bundle(links)：根據數組links的source和target計算路徑
References
[1] 呂之華.精通D3.js：交互式數據可視化高級編程[M].北京：電子工業出版社,2015∶206-244.
總結
以上是生活随笔為你收集整理的d3.js学习笔记-10(布局：树状图、集群图捆、捆图)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 哈工大软件构造自我复习总结Part1
- 下一篇： 读书档案-深度思维：透过复杂直抵本质的跨