2.1 レイアウト
グラフ・ビジュアライゼーション・ライブラリでは、複数のグラフ・レイアウトがサポートされています。各レイアウトには独自のアルゴリズムがあり、頂点とエッジの配置が計算され、グラフのビジュアル構造に影響を与えます。
これらのレイアウトは、設定オプションを使用して次のように構成できます:
Settings:
{
...
layout: <'circle', 'concentric', 'force', 'grid', 'hierarchical', 'preset', 'radial', 'random', 'geographical'>
...
}さらに、設定の書式を使用してレイアウト固有のオプションを渡すことで、カスタム・レイアウトを次のように作成できます:
Settings:
{
...
layout: {
type: 'grid',
spacing: 5
}
...
}次に、グラフ・ビジュアライゼーションでサポートされているレイアウトについて説明します。
- 円形レイアウト
円計レイアウトでは、グラフの頂点が円形に配置されます。 - 同心レイアウト
同心レイアウトでは、グラフの頂点が同心円に配置されます。 - フォース・レイアウト
フォース・レイアウトは、ビジュアルに訴えるグラフを作成することを目的としています。グラフの頂点をビューポートに配置して、すべてのエッジの長さがほぼ等しくなるようにして、エッジ間の交差を最小限に抑えます。 - 地理レイアウト
地理レイアウトでは、マップにグラフをオーバーレイできます。 - グリッド・レイアウト
グリッド・レイアウトでは、適切な間隔のグリッドにグラフの頂点が配置されます。 - 階層レイアウト
階層レイアウトでは、有向非巡回グラフ(DAG)システムを使用してグラフが編成されます。これは特にDAGやツリーに適しています。 - 放射状レイアウト
放射状レイアウトでは、外側に拡がるツリー構造を使用して、グラフの依存性チェーンが表示されます。これは、グラフ・データに階層構造があり、親頂点ごとに多数の子が含まれている場合に特に便利です。 - ランダム・レイアウト
ランダム・レイアウトでは、ビューポート内のランダムな位置にグラフの頂点が配置されます。
親トピック: 対話型グラフ・ビジュアライゼーション機能
2.1.2 同心レイアウト
同心レイアウトでは、グラフの頂点が同心円に配置されます。
spacingプロパティを構成して、頂点間の最小間隔を設定できます。これは基本的に、同心円の半径を調整するために使用します。
親トピック: レイアウト
2.1.3 フォース・レイアウト
フォース・レイアウトは、ビジュアルに訴えるグラフを作成することを目的としています。グラフの頂点をビューポートに配置して、すべてのエッジの長さがほぼ等しくなるようにして、エッジ間の交差を最小限に抑えます。
フォース・レイアウトは、次のいずれかのモードで使用できます:
- 標準モード: これかデフォルト・モードです。このモードでは、ラベルやプロパティ値に関係なく、グラフのすべての頂点が相互に等しく引き合う形になります。
- クラスタ・モード:
"clusterEnabled": trueを設定すれば、クラスタ・モードをアクティブ化できます。このモードでは、同じクラスタ内の頂点が、異なるクラスタ内の頂点よりも強く引き付けられるか、またはクラスタなしになります。これは、グラフ内の頂点のクラスタまたはコミュニティをビジュアル化するのに便利です。次のプロパティを定義して、クラスタ・レイアウトを構成できます。
clusterOptionsを使用すると、頂点のコミュニティまたはクラスタ・メンバーシップを定義する頂点プロパティを指定できます。edgeDistance: すべてのエッジが、指定された長さに設定されます。これは、頂点間のパディングに影響を与える可能性があります。vertexCharge: 基にあるフォースに影響を与えます(たとえば、ビューポート内にとどまることや、頂点を互いに遠ざけることなど)。clusterEnabledがtrueの場合は、クラスタ間のフォースに影響します。velocityDecay: シミュレーションの速度を決定します。spacing: 頂点間の間隔を決定します。clusterEnabled: クラスタ・ベースのレイアウトを有効にするかどうかを決定します。clusterOptions: クラスタ・ベースのレイアウトのみの関連設定。clusterBy: デフォルトでは、クラスタ・レイアウトはvertex.labelsの最初の要素を使用してクラスタを形成します。または、clusterByに頂点のプロパティ名を設定することもできます。その場合、プロパティ値に基づいてクラスタが形成されます。hideUnclusteredVertices: クラスタに属していない頂点を表示するかどうかを決定します。デフォルトはfalseです。
クラスタ・レイアウトの例を次に示します:
Settings: { ... layout: { type: 'force', clusterEnabled: true, clusterOptions: { clusterBy: 'DEPARTMENT_ID', hideUnclusteredVertices: true } } }この例は、
DEPARTMENT_IDに基づいてクラスタを作成することを目的としています。クラスタ・レイアウトを使用した、対応するビジュアライゼーションを次に示します:
親トピック: レイアウト
2.1.4 地理レイアウト
地理レイアウトを使用すると、マップにグラフをオーバーレイできます。
ただし、緯度および経度の座標がグラフの頂点のグラフ・プロパティとして存在している必要があります。
このレイアウトは次のプロパティを使用して構成できます:
appId: これは、http://maps.oracle.com/elocationからマップをフェッチするために使用するapp idを受け入れます。値を指定しないと、汎用のappIdが使用されます。latitude: 頂点の緯度を決めるために使用する頂点プロパティ。longitude: 頂点の経度を決めるために使用する頂点プロパティ。mapType: マップ・ビジュアライゼーションまたはグラフ・ビジュアライゼーション設定のマップ・タイプを選択できます。または、独自のソースおよびレイヤーを指定することもできます。次の操作タイプを使用できます:
- world_map_mb ("oracle-elocation")
- osm_positron (デフォルト)
- osm_bright
- osm_darkmatter
- custom_type
カスタム・タイプには、次の2つの追加フィールドがあります:
sources: マップで使用する独自のソースをJSON形式で指定します。ノート: セキュリティ上の理由から、
attributeプロパティはビジュアライゼーションとは別になっています。layers: マップに表示するレイヤーをJSON要素配列形式で指定します。次に例を示します:[{ "id": "elocation-tiles", "type": "raster", "source": "oracle-elocation" }]
showInfo: ビジュアライザ(図2-5を参照)に情報ボックスを表示して、マウス位置の緯度と経度、およびマップのズーム・レベルを表示します。サポートされている値はtrueまたはfalseです。showNavigation: マップの右上の領域にナビゲーション・コントロールを表示します。markers: マップに位置マーカーを表示します。このパラメータは、次に示す形式のオブジェクトの配列を受け入れます:interface MapMarker { longitude: number; latitude: number; content?: string; }
親トピック: レイアウト
2.1.5 「グリッド」レイアウト
グリッド・レイアウトでは、適切な間隔のグリッドにグラフの頂点が配置されます。
spacingプロパティを構成して、グリッド内の要素の間隔を設定できます。
親トピック: レイアウト
2.1.6 階層レイアウト
階層レイアウトでは、有向非巡回グラフ(DAG)システムを使用してグラフが編成されます。これは特にDAGやツリーに適しています。
このレイアウトは次のプロパティを使用して構成できます:
ranker: 頂点のランク付けに使用するアルゴリズムのタイプを指定します。サポートされているアルゴリズムは次のとおりです:
network-simplex: ネットワーク・シンプレックス・アルゴリズムは、入力グラフの各頂点にランクを割り当て、ランキングを繰り返し改善して、エッジを短くします。tight-tree: タイト・ツリー・アルゴリズムは、エッジがタイトなスパニング・ツリーを構築しますが、入力頂点のランクを調整して、これを実現します。タイトなエッジとは、そのminlen属性と一致する長さのエッジのことです。longest-path: 最長パス・アルゴリズムは、可能なかぎり最下位レイヤーに頂点をプッシュするので、最下位ランクの幅が大きくなり、エッジが必要以上に長くなります。
rankDirection: ランク付けされた頂点の位置合せを制御します。サポートされている値は、UL(左上)、UR(右上方向)、DL(左下方向)、DR(右下方向)、TB(上から下方向)、BT(下から上方向)、LR(左から右方向)、RL(右から左方向)です。vertexSeparation: 頂点間の水平分離を設定します。edgeSeparation: エッジ間の水平分離を設定します。rankSeparation: グラフ内の2つのランク(レベル)間の分離を設定します。
親トピック: レイアウト
2.1.7 放射状レイアウト
放射状レイアウトでは、外側に拡がるツリー構造を使用して、グラフの依存性チェーンが表示されます。これは、グラフ・データに階層構造があり、親頂点ごとに多数の子が含まれている場合に特に便利です。
隣接する頂点が同じ親頂点を共有する場合はspacingプロパティを構成して、それらの頂点の間隔を設定できます。ゼロに設定すると、間隔は適用されません。
親トピック: レイアウト
