> [Wiki](Home) ? [[API--中文手冊]] ? [[布局]] ? **包布局**
* 如發現翻譯不當或有其他問題可以通過以下方式聯系譯者:
* 郵箱:zhang_tianxu@sina.com
* QQ群:[D3數據可視化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374,[大數據可視化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
下圖采用包含(嵌套)來展現層級結構。每一個葉子節點的大小都顯示了每個數據點數量的大小。如圖所示,通過小圈的大小累積逐漸接近于一個大圈,但要注意的是,由于空間上的浪費,在層級之間也會存在一些失真,但只要葉子節點可以精確的比較就行。盡管圓形填充沒有像treemap那樣,高效率的使用了空間,空間上的浪費反而清晰地展現了分層效果。
通過展開層級,pack layout 也可以被用來創建bubble charts(氣泡圖表)。
和D3中其他類相似,layout中的布局遵循方法鏈模式,其中setter方法返回布局本身,并允許在一個簡單語句中調用多個setter方法。
# d3.layout.pack()
使用默認設置創建一個新的包布局,默認的排序順序是按值升序排序;默認的子訪問器,假設每一個輸入數據都是一個帶有子數組的對象,默認的大小是1×1。
# pack(root)
# pack.nodes(root)
運行包布局,返回與指定根節點root相關聯的節點的數組。簇布局是D3家族分層布局中的一部分。這些布局遵循相同的基本結構:將輸入參數傳遞給布局是層次的根節點root ,輸出的返回值是一個代表所有節點計算出的位置的數組。每個節點上填充以下幾個屬性:
? parent – 父節點,或根節點為null。
? children – 子節點數組,或葉子節點為null。
? value –節點的值,作為訪問器返回的值。
? depth –節點的深度,根節點從0開始。
? x –計算的節點位置的x坐標。
? y –計算的節點位置的y坐標。
? r – 計算的節點半徑。
# pack.links(nodes)
給定一個特定節點的數組nodes,例如由節點返回的,返回表示每個節點的從父母到孩子鏈接的對象數組。而葉子節點將不會有任何的鏈接。每個鏈接都是一個對象,且具有兩個屬性:
? source –父節點(正如上述描述的那樣)。
? target –子節點。
此方法檢索一組適合展示的鏈接描述很有用,通常與對角線形狀發生器一起用。例如:
svg.selectAll("path")
.data(cluster.links(nodes))
.enter().append("path")
.attr("d", d3.svg.diagonal());
# pack.children([children])
如果指定children 參數,則設置特定的孩子訪問器函數。如果children沒有指定,則返回當前孩子訪問函數,默認假定輸入的數據是一個帶有孩子數組的對象:
function children(d) {
return d.children;
}
通常情況下,可以使用d3.json很方便加載節點層次結構,代表輸入層次結構的嵌套JSON對象。例如:
{
"name": "flare",
"children": [
{
"name": "analytics",
"children": [
{
"name": "cluster",
"children": [
{"name": "AgglomerativeCluster", "size": 3938},
{"name": "CommunityStructure", "size": 3812},
{"name": "MergeEdge", "size": 743}
]
},
{
"name": "graph",
"children": [
{"name": "BetweennessCentrality", "size": 3534},
{"name": "LinkDistance", "size": 5731}
]
}
]
}
]
}
孩子的訪問器是第一次被層次中的根節點調用。如果存取器返回null,則該節點被假定為葉節點并且布局遍歷終止。否則,訪問器應返回表示子節點的數據元素的數組。
# pack.sort([comparator])
如果comparator 比較器指定了,則使用特定的比較器函數,設置同級節點布局的排序順序。如果comparator 沒有指定,則返回當前組排序順序,默認為升序排列,按通過相關的輸入數據的數值屬性來排序:
function comparator(a, b) {
return a.value - b.value;
}
這個比較器的函數被節點對調用,輸入的數據傳遞給每個節點。空比較器禁止排序,使用樹遍歷的順序。比較器函數也可以使用d3.ascending或d3.descending來實現排序。
# pack.value([value])
如果value 值指定了,則設置值訪問器為指定的函數。如果value 值未指定,則返回當前的值訪問器,其中假定輸入數據是一個帶有一個數字值屬性的對象:
function value(d) {
return d.value;
}
對每一個輸入的數據元素調用值訪問器,并且必須返回一個數字,來表示該節點的數值。此值被用來按比例設置每個圓的面積為value。但是請注意,圓圈大小是嚴格地只在葉節點之間才存在可比性;內部的節點無法準確地比較,因為在打包子圓圈和他們父母之間還留有空白。
# pack.size([size])
如果指定了大小size,則設定可用的布局大小為指定的表示x和y的二元數組。如果size 大小沒有指定,則返回當前大小,默認為1×1。
# pack.radius([radius])
如果指定了半徑radius,則設置半徑的函數,用于計算每個節點的半徑。如果半徑radius為空,因為默認情況下,半徑自動從節點值確定,且調整為適合的布局大小。如果半徑radius未指定,則返回當前的半徑函數,默認為null。此半徑radius 也可為均勻的圓大小指定為一個恒定數目。
# pack.padding([padding])
如果指定padding ,則設置相鄰圈之間的大概填充,以像素為單位。如果沒有指定padding ,則返回當前的填充,默認為0。
* 何凱琳譯 2014-12-01
* gulu校對2014-12-6 21:32:15