Pack Layout - InfographicsJa/d3 GitHub Wiki

Wiki ▸ API Reference ▸ Layouts ▸ Hierarchy ▸ Pack Layout

包含図は階層構造を表現するために包含、ネスト構造を利用しています。それぞれの葉 node の円の大きさは、それぞれのデータ店の量的な次元を表現しています。包含している円は、それぞれのサブツリーの累積されたサイズを、レベル感に存在している無駄なスペースがあるために近似的に示しています。葉 node のみが正確に比較を行われます。 treemap ほど効率的に空間を利用しないものの、 circle packing は、無駄な空間によって階層構造をより顕著に表現しています。

pack layout はまた、 bubble charts を作るために、階層を平面にして利用されます。

D3 のその他のクラスのように、 layout も setter メソッドが layout 自身を返すことで、 chain パターンに従い、これにより、簡潔な宣言を呼び出す複数のセッターの利用が可能です。

# d3.layout.pack()

デフォルトの設定で、 pack layout を生成します。デフォルトの sort order は value の昇順です。デフォルトの children アクセサは、それぞれの入力データが children 配列を持つオブジェクトであることを想定しています。デフォルトの size は 1x1 です。

# pack.sort([comparator])

もし、 comparator が指定されていれば、指定された comparator 関数を layout が利用して、隣接する node を整列するようにセットします。もし、 comparator が指定されていなければ、現在の group の並び順を返します。デフォルトでは、関連しているデータが数値の value 属性による昇順になります。

function comparator(a, b) {
  return a.value - b.value;
}

comparator 関数は、 node のペアに対して呼び出されます。 null comparator は sort を無効にし、 tree の走査順を利用します。また、 comparator 関数は d3.ascending または d3.descending を利用して実装されています。

# pack.children([children])

もし、 children が指定されていれば、 children アクセサをセットしますもし指定されていなければ、現在の children アクセサ関数を返します。デフォルトでは、入力データが children 配列を持つオブジェクトであることが想定されています。

function children(d) {
  return d.children;
}

d3.json を利用して、ネストされた JSON オブジェクトとして入力の階層構造を表現している node 階層性をロードすることが便利です。

{
 "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}
     ]
    }
   ]
  }
 ]
}

階層性の中で、最初に root node に対して children アクセサが呼び出されます。もし、アクセサが null を返したならば、 node は葉 node であり、 layout 走査が完了したと考えられます。そうでなければ、アクセサは子 node を表すデータ要素の配列を返します。

# pack.nodes(root)

pack layout を実行すると、指定した root node に関わる node の配列が返ってきます。 cluster layout は D3 の hierarchical layouts のファミリーの1つです。これらの (cluster) layout は、同じ基本的な構造を持っています。 layout に対する入力引数は、階層性を持つ root node であり、出力される値は、位置を計算されたすべての node を表す配列であることです。幾つかの属性は、 node の密度が高くなります。

parent - 親 node, root の場合は null になります。
children - 子 node の配列、葉 node の場合は null になります。
value - node の value, value アクセサによって返されます。
depth - node の深さ。root に対する 0 から始まります。
x - 計算された node の位置の x 座標。
y - 計算された node の位置の y 座標。
r - 計算された node の半径。

# pack.links(nodes)

指定された node の配列が渡されると、 nodes によって返されるものと同様に、各々の node に対して親から子への link を表現する配列オブジェクトが返されます。葉 node では、 link を持ちません。各々の link は 2 つの属性を持ちます。

source - (上述した)親 node
target - 子 node

表示を行う際に適切な link の内容一式を必要とする時にこのメソッドは便利です。 diagonal の shape generator で連結する時などです。

svg.selectAll("path")
    .data(cluster.links(nodes))
  .enter().append("path")
    .attr("d", d3.svg.diagonal());

# pack.value([value])

value が指定されていれば、指定された関数を value アクセサとしてセットします。 value が指定されていなければ、現在の value アクセサを返します。デフォルトでは、入力されたデータが数値の value 属性を持つオブジェクトであると想定されています。

function value(d) {
  return d.value;
}

value アクセサは、各データ要素に対して呼び出され、 node の数値 value を表現している数値を返さなければなりません。この value に比例して各々の円の面積をセットするために用いられます。葉 node 間でのみ円のサイズが厳密に比較され、中間の node では、それらが子のエント親の間にある空の空間が存在するために厳密に比較できないことに注意してください。

# pack.size([size])

size が指定されていれば、 x と y を表現する2要素の数値配列で可能な layout のサイズを指定します。もし、 size が指定されいなければ、現在のサイズを返します。デフォルトでは 1x1 です。

Pack Layout - InfographicsJa/d3 GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️