作成者Observableツリーマップ
例 · 1991年にBen Shneidermanによって導入されたツリーマップは、各ノードに関連付けられた値に従って領域を長方形に再帰的に分割します。D3のツリーマップ実装は拡張可能なタイルメソッドをサポートしています。デフォルトのスクエア化メソッドは、黄金比のアスペクト比を持つ長方形を生成しようとします。これは、単に深さごとに水平方向と垂直方向の分割を交互に行うスライスアンドダイスよりも、可読性とサイズ推定の精度が向上します。
treemap()
ソースコード · デフォルト設定で新しいツリーマップレイアウトを作成します。
treemap(root)
ソースコード · 指定されたroot 階層構造をレイアウトし、rootとその子孫に次のプロパティを割り当てます。
- node.x0 - 長方形の左端
- node.y0 - 長方形の上端
- node.x1 - 長方形の右端
- node.y1 - 長方形の下端
ツリーマップレイアウトに階層構造を渡す前に、root.sumを呼び出す必要があります。レイアウトを計算する前に、階層構造の順序を付けるためにroot.sortを呼び出すこともおそらく必要です。
treemap.tile(tile)
ソースコード · tileが指定されている場合、タイルメソッドを指定された関数に設定し、このツリーマップレイアウトを返します。tileが指定されていない場合、現在のタイルメソッドを返します。これは、黄金比でtreemapSquarifyをデフォルトとしています。
treemap.size(size)
ソースコード · sizeが指定されている場合、このツリーマップレイアウトのサイズを指定された2要素の数値配列[width, height]に設定し、このツリーマップレイアウトを返します。sizeが指定されていない場合、現在のサイズを返します。これは[1, 1]をデフォルトとしています。
treemap.round(round)
ソースコード · roundが指定されている場合、指定されたブール値に従って丸めを有効または無効にし、このツリーマップレイアウトを返します。roundが指定されていない場合、現在の丸め状態を返します。これはfalseをデフォルトとしています。
treemap.padding(padding)
ソースコード · paddingが指定されている場合、内側と外側のパディングを指定された数値または関数に設定し、このツリーマップレイアウトを返します。paddingが指定されていない場合、現在の内側パディング関数を返します。
treemap.paddingInner(padding)
ソースコード · paddingが指定されている場合、内側のパディングを指定された数値または関数に設定し、このツリーマップレイアウトを返します。paddingが指定されていない場合、現在の内側パディング関数を返します。これは定数0をデフォルトとしています。paddingが関数の場合、子を持つ各ノードに対して呼び出され、現在のノードが渡されます。内側のパディングは、ノードの隣接する子要素を分離するために使用されます。
treemap.paddingOuter(padding)
ソースコード · paddingが指定されている場合、上、右、下、左のパディングを指定された数値または関数に設定し、このツリーマップレイアウトを返します。paddingが指定されていない場合、現在のトップパディング関数を返します。
treemap.paddingTop(padding)
ソースコード · paddingが指定されている場合、上部のパディングを指定された数値または関数に設定し、このツリーマップレイアウトを返します。paddingが指定されていない場合、現在のトップパディング関数を返します。これは定数0をデフォルトとしています。paddingが関数の場合、子を持つ各ノードに対して呼び出され、現在のノードが渡されます。上部のパディングは、ノードの上端とその子要素を分離するために使用されます。
treemap.paddingRight(padding)
ソースコード · paddingが指定されている場合、右側のPaddingを指定された数値または関数に設定し、このツリーマップレイアウトを返します。paddingが指定されていない場合、現在の右パディング関数を返します。これは定数0をデフォルトとしています。paddingが関数の場合、子を持つ各ノードに対して呼び出され、現在のノードが渡されます。右パディングは、ノードの右端とその子要素を分離するために使用されます。
treemap.paddingBottom(padding)
ソースコード · paddingが指定されている場合、下部のパディングを指定された数値または関数に設定し、このツリーマップレイアウトを返します。paddingが指定されていない場合、現在の下部パディング関数を返します。これは定数0をデフォルトとしています。paddingが関数の場合、子を持つ各ノードに対して呼び出され、現在のノードが渡されます。下部のパディングは、ノードの下端とその子要素を分離するために使用されます。
treemap.paddingLeft(padding)
ソースコード · paddingが指定されている場合、左側のPaddingを指定された数値または関数に設定し、このツリーマップレイアウトを返します。paddingが指定されていない場合、現在の左パディング関数を返します。これは定数0をデフォルトとしています。paddingが関数の場合、子を持つ各ノードに対して呼び出され、現在のノードが渡されます。左パディングは、ノードの左端とその子要素を分離するために使用されます。
ツリーマップのタイル配置
treemap.tileで使用できるいくつかの組み込みタイル配置メソッドが提供されています。
treemapBinary(node, x0, y0, x1, y1)
ソースコード · 指定されたノードを、幅の広い長方形には水平方向に、高さの高い長方形には垂直方向に分割することで、ほぼバランスの取れた2分木に再帰的に分割します。
treemapDice(node, x0, y0, x1, y1)
ソースコード · x0、y0、x1、y1で指定された長方形領域を、指定されたnodeの子ノードの値に従って水平方向に分割します。 子ノードは、指定された長方形の左端（x0）から順番に配置されます。子ノードの値の合計が、指定されたnodeの値よりも小さい場合（つまり、指定されたnodeにゼロ以外の内部値がある場合）、残りの空スペースは、指定された長方形の右端（x1）に配置されます。
treemapSlice(node, x0, y0, x1, y1)
ソースコード · x0、y0、x1、y1で指定された長方形領域を、指定されたnodeの子ノードの値に従って垂直方向に分割します。 子ノードは、指定された長方形の上端（y0）から順番に配置されます。子ノードの値の合計が、指定されたnodeの値よりも小さい場合（つまり、指定されたnodeにゼロ以外の内部値がある場合）、残りの空スペースは、指定された長方形の下端（y1）に配置されます。
treemapSliceDice(node, x0, y0, x1, y1)
ソースコード · 指定されたnodeの深さが奇数の場合はtreemapSliceに、偶数の場合はtreemapDiceに委譲します。
treemapSquarify(node, x0, y0, x1, y1)
ソースコード · Bruls らの論文で提案されたスクエアファイ・ツリーマップアルゴリズムを実装します。これは、指定されたアスペクト比の長方形を作成することを目指しています。
treemapResquarify(node, x0, y0, x1, y1)
例 · ソースコード · treemapSquarifyと似ていますが、d3.treemapResquarifyによって計算された以前のレイアウトのトポロジ（ノードの隣接関係）を保持します（存在し、同じ目標アスペクト比を使用していた場合）。このタイリング方法は、ノードのサイズのみが変更され、相対的な位置が変更されないため、邪魔になるシャッフルやオクルージョンを回避できるため、ツリーマップの変更をアニメーション化する場合に適しています。しかし、安定した更新の欠点は、後続の更新に対するレイアウトが最適ではないことです。Brulsらのスクエアファイアルゴリズムは、最初のレイアウトのみで使用されます。
squarify.ratio(ratio)
ソースコード · 生成される長方形の望ましいアスペクト比を指定します。ratioは1以上の数値で指定する必要があります。生成される長方形の向き（縦長か横長か）は、アスペクト比によって暗に示されるものではありません。たとえば、アスペクト比が2の場合、幅:高さの比が2:1または1:2の長方形が混在したものを作成しようとします。（ただし、異なる寸法で正方形のツリーマップを生成し、それを目的のアスペクト比に伸縮させることで、この結果をほぼ達成できます。）さらに、指定されたratioはタイリングアルゴリズムに対するヒントにすぎず、長方形が指定されたアスペクト比を持つとは限りません。指定しない場合、アスペクト比はKong らの論文に従って、黄金比φ=(1+sqrt(5))/2にデフォルト設定されます。