2018-03-22D3の階層構造を可視化するpack(d3.hieararchy)のプログラムデモです(v4/v5対応)。}]};描画用のデータを用意します。データ構造の詳細はこちらを参照ください。すべての末端ノードに、バルーンの大きさを表示するためのvalue値を設定します。親ノードのサイズは子、孫ノードのvalue値の合計値を次のデータ変換時に設定します。height]).padding(0);pack(root);準備したデータを、描画用のデータ構造に変更します。準備したデータ→hierarchy用のデータ→描画種類ごと(今回はpack)のデータと2段階の変換が必要です。});上記の関数でdataをhierarchy用のデータ構造rootに変更した後(データ構造詳細はこちらを参照)、value値を設定していないノードに、子孫ノードの合計value値を計算します。次に、pack用のデータに変更するための関数を呼び出します。height]).padding(0);pack(root);d3.pack()で呼び出した関数にrootを引数として設定すると、次のデータがrootに付与されます。サークルの半径また、d3.pack()には以下の設定が可能です。d.value;}などとした関数で指定します。デフォルトはnullです。高さ]の2要素配列で設定します。引数が設定されていない場合は現在のサイズを返します。サークルの接線間の距離を指定します。});サークル用のsvg要素を設定します。はじめに”g”要素を設定し、その中に”circle”と”text”を設定していきます。データの割り当ての部分でroot.descendants()1root.descendants()の関数を使っていますが、これは入れ子になったノードを配列として並べてくれる関数です。“circle”では初めにカラー配列を設定し、”fill”の属性として深さ方向の位置に応じた色を設定しています。”text”で設定している”text-anchor”はtextの位置を設定するスタイルです。まとめあまりお目にかからないチャートですが、インパクトのある階層構造の描画に用いることができます。末端要素の大きさ(半径)以外は数値で規定されないため、使い方には注意が必要です。map)の作り方D3でのヒートマップの作り方を紹介します。種類一覧D3の折れ線グラフの種類を紹介します。chart)の作り方D3での基本チャート、折れ線グラフの作り方を紹介します。TOP%d人のブロガーが「いいね」をつけました。