> [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
矩形樹圖最先由[Ben Shneiderman](http://www.cs.umd.edu/hcil/treemap-history/)在1991年提出; 矩形樹圖會遞歸的對一塊矩形區域進行切分, 以達到層級展示的效果. 正如[分區布局](分區布局)中, 每個節點的大小都是顯而易見的. 正方化的矩形樹圖使用近正方的矩形, 因此, 相比于傳統的切塊或切片圖, 具有更好的可讀性和節點大小易讀性. 還有其他一些關于矩形樹圖的算法, 比如: [Voronoi](http://portal.acm.org/citation.cfm?id=1056018.1056041) 和 [jigsaw](http://hint.fm/papers/158-wattenberg-final3.pdf), 但是并不常用.
[](http://bl.ocks.org/mbostock/4063582)
和其他 **D3** 類一樣, 布局也支持鏈式調用.
*鏈式調用, 即: 一個setter方法會返回當前實例, 意味著意味著一個setter方法調用后可以緊接著另一個setter方法的調用, 如: selection.attr('x', 1).style('color', '#999')*
<a name="treemap" href="#treemap">#</a> d3.layout.<b>treemap</b>()
使用默認的配置實例化一個新的矩形樹布局: 默認的遞減排序, 默認的值存取器會假定輸入的數據是一個有value屬性的對象, 默認的子節點存取器會假定輸入的數據是一個以對象為元素的數組, 默認的繪圖區域大小是[1, 1].
# treemap(root)
# treemap.nodes(root)
運行樹形圖布局，返回與指定根節點相關的節點數組。樹狀圖布局是D3族分層布局的一部分。這些布局遵循相同的基本結構：布局的輸入參數是層次結構的根節點，輸出的返回值是代表所有節點計算的位置的數組。每個節點還有一些屬性：
? parent -父節點，或根是null。
? children -子節點的數組，或葉節點是null。
? value -該節點的值，通過值訪問器返回。
? depth -節點的深度，根開始為0。
? x -節點位置的最小橫坐標。
? y -節點位置的最小縱坐標。
? dx -節點位置的x軸寬。
? dy -節點位置的y軸寬。
請注意，這會改變傳遞的節點！
雖然布局有x 和 y尺寸，這表示一個任意的坐標系統；例如，你可以以x為半徑y為角度產生輻射狀而不是直角的布局。在直角方向，x，y，dx和dy對應于“x”，“y”，“寬度”和“高度”的SVG矩形元素的屬性。
# treemap.links(nodes)
給定指定的節點數組，如返回的節點，返回一個對象數組代表從父到子節點的鏈接。葉節點將不會有任何鏈接。每一個關系都有兩個屬性的對象：
? source -父節點（如上所述）。
? target -子節點。
這種方法是有用的，用于檢索一組適合于顯示的鏈接描述，經常與對角線形狀發生器一起使用。例如：
svg.selectAll("path")
.data(partition.links(nodes))
.enter().append("path")
.attr("d", d3.svg.diagonal());
# treemap.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，則該節點在布局遍歷終止被認為是葉節點。否則，訪問應返回表示子節點的數據元素的數組。
# treemap.sort([comparator])
如果比較器是指定的，使用指定比較函數設置布局的兄弟節點的排序順序。如果沒有指定比較器，返回當前組的排序順序，默認為通過相關的輸入數據的數值屬性降序排列：
function comparator(a, b) {
return b.value - a.value;
}
比較器函數節點對被調用，傳遞每個節點的輸入數據。空比較器禁用排序并使用樹的遍歷順序。比較器的功能也可以用d3.ascending或d3.descending實施。
# treemap.value([value])
如果指定了值value ，將值訪問器為指定的函數。如果值是未指定的，則返回當前值的訪問器，假定輸入數據是一個帶有數值屬性的對象：
function value(d) {
return d.value;
}
值訪問器調用被每個輸入數據元素，并且必須返回一個表示該節點的數值。這個值用于按比例設定每個節點面積的值。
# treemap.size([size])
如果尺寸size 是指定的，設置現有布局尺寸，指定代表x和y的數值的兩元素數組。如果尺寸不是指定的，則返回當前大小，默認為1×1。
# treemap.padding([padding])
為每個樹形圖單元獲取或設置填充，以像素為單位。填充確定保留父節點和子節點之間的額外空間量；這個空間可以用于通過外邊緣表示層次結構，或保留父標簽的空間。如果不使用填充，那么樹中葉子的內容會完全填滿布局的大小。
如果指定了填充，則設置新的填充并返回樹形布局；如果沒有指定填充，則返回當前的填充。填充可以指定幾種方法：
? 空值禁用填充；空等同于零。
? 一個數字表示均勻填充，以像素為單位，在所有四面。
? 數組的數值表示上，右，下和左填充值。
填充也可以被指定為一個函數，它返回上面的三個值中的一個。這個函數為每個內部（非葉）節點求值，并且可以被用來動態地計算填充。
# treemap.round([round])
如果四舍五入round 是指定的，設置樹狀圖布局是否將全面取整到像素邊界。這可以很好地避免SVG邊緣有鋸齒。如果四舍五入不是指定的，返回是否將樹狀圖四舍五入。
# treemap.sticky([sticky])
如果粘滯sticky 是指定的，設置樹形布局是否是“粘滯”：
粘滯樹形布局將保留整個過渡中節點的相對排列。節點分成正方化水平和垂直行，通過每行中最后一個元素存儲一個z屬性持續整個更新；這允許節點平滑地調整大小，沒有將阻礙感知變化值的洗牌或閉塞。但請注意，這會為兩種狀態之一生成一個次優的布局。如果沒有指定粘滯，則返回的樹形布局是否已被指定粘滯。
實現注意事項：粘滯樹形圖的內部緩存節點數組；因此，相同的布局實例不可能再使用于多個數據集。當切換帶有粘滯布局的數據集時重置緩存狀態，再次調用sticky(true)。自從版本1.25.0，層次布局不再在每次調用中默認復制輸入數據，因此它可能是能夠消除高速緩存和使布局完全無狀態。
# treemap.mode([mode])
如果模式mode 是指定的，設置布局的算法。如果模式沒有指定，返回當前的布局算法，默認為“squarify”。支持以下模式：
? squarify - rectangular subdivision; squareness controlled via the target ratio.
? slice - horizontal subdivision.
? dice - vertical subdivision.
? slice-dice - alternating between horizontal and vertical subdivision.
? squarify -矩形細分；矩形通過目標比率控制。
? slice –水平細分。
? dice -垂直細分。
? slice-dice -水平和垂直細分之間的交替。
* ?譯gulu
* 校對2014-12-7 08:43:59
