1. プロパティ・グラフのグラフ開発者ガイド
  2. SQLプロパティ・グラフ
  3. APEXグラフ・ビジュアライゼーション・プラグインを使用したSQLグラフ問合せのビジュアル化
  4. APEXグラフ・ビジュアライゼーション・プラグインの属性の構成

8.3 APEXグラフ・ビジュアライゼーション・プラグインの属性の構成

APEXアプリケーションでグラフ・ビジュアライゼーション・プラグインの属性を使用してグラフ・ビジュアライゼーションをカスタマイズする方法を説明します。

ページ・デザイナの右ペインにある「属性」タブ(プロパティ・エディタ)で、このプラグイン・コンポーネントの属性を構成できます。

属性は、次のパネルでそのスコープに従ってグループ化されています。

親トピック: APEXグラフ・ビジュアライゼーション・プラグインを使用したSQLグラフ問合せのビジュアル化

8.3.1 設定

次のような「設定」パネルが表示されます:

図8-3 設定


例8-3の説明が続きます
「図8-3 設定」の説明

次の表では、「設定」パネル内の属性について説明します:

表8-1 「設定」の属性

属性 説明
SQL問合せでページ区切りをサポートする paginateインタフェースを実装している場合は、このトグルをオンにします。
ページ・サイズ SQL問合せでページ区切りをサポートするを有効にした場合の、ページごとに表示される頂点とエッジの数を決める整数値。
ライブ検索 このトグルをオンにすると、グラフをビジュアル化するときにライブ検索が有効になります。
凡例の表示 このトグルをオンにすると、グラフ・ビジュアライゼーションの凡例が表示されます。
凡例の幅 「凡例の表示」を有効にした場合の、凡例の幅を制御する整数値。デフォルトは150です。

親トピック: APEXグラフ・ビジュアライゼーション・プラグインの属性の構成

8.3.2 外観

次のような「外観」パネルが表示されます:

図8-4 外観


図8-4の説明が続きます
「図8-4 外観」の説明

次の表では、「外観」パネル内の属性について説明します:

表8-2 「外観」の属性

属性 説明
高さ グラフ・ビジュアライゼーション・パネルのサイズを設定する整数値(px単位)。デフォルト値は400 pxです。
表示 次のオプションを有効または無効にできます:
  • モード: サポートされているグラフ・ビジュアライゼーション・モードを次に示します:
    • 移動/ズーム:
    • 画面に合わせる
    • 固定モードの切替え
  • 探索: サポートされているグラフ操作オプションを次に示します:
    • 削除: 選択した頂点またはエッジをビジュアライゼーションから削除します。
    • グループ: 選択した複数の頂点をグループ化し、それらを1つの頂点にまとめます。
    • グループ化解除: まとめた頂点のグループを選択し、それらのグループ化を解除します。
    • 元に戻す: 最後のアクションを元に戻します。
    • 再実行: 最後のアクションを再実行します。
    • リセット: 問合せの後にビジュアライゼーションを元の状態にリセットします。
辺のグループ化 このオプションを有効にすると、そのグラフにおいて、同じソース頂点とターゲット頂点の間の複数のエッジがグループ化されます。グループ化されたエッジは、グループ化されたエッジの数を示す数値がある単一のエッジとして表示されます。
サイズ・モード 次の2つのサイズ・モードがサポートされています:
  • 標準(デフォルト)
  • コンパクト
辺マーカー サポートされているエッジ・マーカーを次に示します:
  • なし
  • 矢印(デフォルト)
ツールチップでHTMLを省略 頂点またはエッジのツールチップで使用されるHTMLコンテンツを省略する場合は、このトグルをオンにします。
ツールチップの最大長 ツールチップの最大文字数を決める整数値。デフォルト値は100です。
ダーク・テーマ ダーク・テーマに切り替えるには、このトグルを有効にします。
カスタム・テーマ 次のカスタム・テーマを構成する場合は、このトグルを有効にします:
  • 背景色: 背景について色コードを入力するか色を選択します。
  • テキストの色: テキストについて色コードを入力するか色を選択します。

親トピック: APEXグラフ・ビジュアライゼーション・プラグインの属性の構成

8.3.3 レイアウト

「レイアウト」パネルでは、次のいずれかのレイアウト・オプションを選択できます:

  • Circle
  • Concentric
  • フォース (デフォルト)
  • Grid
  • Hierarchical
  • Radial
  • Geographical

レイアウト構成パラメータは、レイアウトごとに異なる場合があります。

「フォース」レイアウト

次の表に、「フォース」のレイアウト構成パラメータを示します:

表8-3 「フォース」レイアウトの属性

属性 説明
間隔 「間隔」により、様々な頂点をどのくらいの近さで隣同士にレンダリングするかを決めます。デフォルトは1.5です。
アルファ減衰 時間の経過とともにシミュレーションの内部アルファ値(これは、ノード移動に影響する)が減少しフォース・レイアウトが徐々に安定していく速さを制御します。デフォルトは0.01です。
速度減衰 シミュレーションの終了の速さを決めます。デフォルトは0.1です。
辺の距離 シミュレーションでは、それぞれのエッジを、指定された長さに設定することが試みられます。これは、頂点間のパディングに影響を与える可能性があります。デフォルトは100です。
頂点の指示 基にあるフォースに影響を与えます(たとえば、ビューポート内にとどまることや、頂点を互いに遠ざけることなど)。クラスタの有効化がtrueの場合は、それがクラスタ間のフォースに影響します。デフォルトは-60です。
クラスタの有効化 クラスタ・ベースのレイアウトを有効にする場合は、このトグルをオンにします。
クラスタ基準 クラスタ・レイアウト(有効になっている場合)では、デフォルトで、vertex.labelsでの最初の要素(「スタイル」を参照)を使用してクラスタが形成されます。これは頂点のプロパティ名に設定することもでき、クラスタはそのプロパティ値に基づいて形成されるようになります。
クラスタ化されていない頂点を非表示 クラスタに属していない頂点を表示するかどうかを決めます。デフォルトはfalseです。

「円」、「同心」および「放射状」レイアウト

次のレイアウトでは、「間隔」構成のみが必要です:

  • 円: 「間隔」により、円の半径を設定します。デフォルトは2です。
  • 同心: 「間隔」により、頂点間の最小間隔を設定します。これは半径調整に使用されます。デフォルトは2です。
  • 放射状: 「間隔」により、隣接する頂点で同じ親頂点が共有されている場合の、それらの隣接頂点間の分離間隔を設定します。0に設定した場合、間隔は適用されません。デフォルトは2です。

「グリッド」レイアウト

「グリッド」レイアウトでは、次の構成オプションがサポートされています:

  • 「間隔: 「間隔」により、グリッド内の要素間のスペースを設定します。デフォルトは2です。
  • 行: グリッド内の行の数を決めます。
  • 列: グリッド内の列の数を決めます。

デフォルトの行数と列数は、グラフ・ビジュアライゼーション・パネルの高さと幅に応じて動的に計算されます。

「階層」レイアウト

次の表に、「階層」のレイアウト構成パラメータを示します:

表8-4 「階層」レイアウトの属性

属性 説明
ランク付け方向 ランク付けされた頂点の位置合せ。

サポートされているオプションは、上から左、上から右、下から左、下から右、「上から下へ」、「下から上へ」、「左から右」、「右から左」です。

ランク付け方法

頂点のランク付けに使用するアルゴリズムのタイプを指定します。

サポートされているアルゴリズムは、「ネットワーク・シンプレックス」、「タイト・ツリー」および「最長パス」です。

頂点の分離 頂点間の水平分離を設定します。
辺の分離 エッジ間の水平分離を設定します。
ランクの分離 グラフ内の2つのランク(レベル)間の分離を設定します。

「地理」レイアウト

次の表に、「地理」のレイアウト構成パラメータを示します:

表8-5 「地理」レイアウトの属性

属性 説明
マップ・タイプ マップ・ビジュアライゼーションやグラフ・ビジュアライゼーションの設定でのマップ・タイプを選択するか、独自のソースおよびレイヤーを指定します。
経度 頂点の経度を決めるために使用する頂点プロパティを指定します。
緯度 頂点の緯度を決めるために使用する頂点プロパティを指定します。
アプリケーションID http://maps.oracle.com/elocationからマップをフェッチするための、appIdを指定します。省略すると、汎用appIdが使用されます。
情報の表示 このトグルを有効にすると、ビジュアライゼーションにおいて、マウス位置の緯度と経度、およびマップのズーム・レベルを示す情報ボックスが表示されます。
ナビゲーション マップの右上領域にナビゲーション・コントロールを表示します。
マーカー マップに位置マーカーを表示します

関連項目:

プロパティ・グラフのビジュアライゼーションのJavaScript APIリファレンスの「レイアウト」ページ

親トピック: APEXグラフ・ビジュアライゼーション・プラグインの属性の構成

8.3.4 キャプション

次のような「キャプション」パネルが表示されます:

図8-5 キャプション


例8-5の説明が続きます
「図8-5 キャプション」の説明

次の表では、「キャプション」パネル内の属性について説明します:

表8-6 「キャプション」の属性

属性 説明
頂点のキャプション 頂点ラベルとして表示するプロパティを指定します。
辺のキャプション エッジ・ラベルとして表示するプロパティを指定します。
キャプション最大長 キャプションの最大長を指定します。
カーソルが置かれているラベルの全文を表示 特定の頂点またはエッジにカーソルを合わせたときに頂点や辺のキャプションを表示する場合は、このトグルを有効にします。

親トピック: APEXグラフ・ビジュアライゼーション・プラグインの属性の構成

8.3.5 成長

次のような成長パネルが表示されます:

図8-6 成長


図8-6の説明が続きます
「図8-6 成長」の説明

次の表では、成長パネル内の属性について説明します:

表8-7 成長の属性

属性 説明
成長の有効化 このトグルをオンにすると、グラフ・ビジュアライゼーションでのネットワーク成長が有効になります。
高さ チャートの高さを指定します。
チャート チャート・タイプとして「棒」または「折れ線」を選択します。
粒度 入力単位について集計の粒度を指定します。
単位 増分について時間の単位を選択します。
頂点成長開始プロパティ 頂点フィルタリングに使用するプロパティの名前を選択します。

グラフの時間枠は、頂点成長開始プロパティより後になります。

頂点終了プロパティ 頂点フィルタリングに使用するプロパティの名前を選択します。

グラフの時間枠は、「頂点終了プロパティ」より前になります。

辺開始プロパティ エッジ・フィルタリングに使用するプロパティの名前を選択します。

グラフの時間枠は、「辺開始プロパティ」より後になります。

辺終了プロパティ エッジ・フィルタリングに使用するプロパティの名前を選択します。

グラフの時間枠は、「辺終了プロパティ」より前になります。

値の除外 除外する値を1つ以上指定します。
除外値の表示 除外した値を表示する場合は、このトグルを有効にします。
再生ステップ 再生が進む頻度(ミリ秒単位)を決める値を指定します。
再生タイムアウト 再生中のタイムアウトごとのステップ数を決める値を指定します。
位置の維持 オンにした場合は、ネットワーク成長で、再生中にグラフの元の頂点位置が維持されます。
軸 サポートされている値のいずれか(頂点、辺または両方)を選択します。
ラベル形式 日付を表示する必要がある形式を表す文字列を指定します。なお、この形式には、YYYY、MMまたはDDのどれかが含まれている必要があります。そうでない場合、この形式は無視されます。

親トピック: APEXグラフ・ビジュアライゼーション・プラグインの属性の構成

8.3.6 「拡張」および「コールバック」のオプション

次のような「拡張」パネルと「コールバック」パネルが表示されます:

図8-7 「拡張」および「コールバック」のオプション


図8-7の説明が続きます
「図8-7 「拡張」および「コールバック」のオプション」の説明

「拡張」パネルでは、次のオプションを使用してグラフ・ビジュアライゼーションのカスタム設定を構成できます:

  • スタイル: スタイル構成をJSON形式で指定できます。詳細は、「スタイル」を参照してください。
  • 設定: グラフ設定をJSON形式で指定できます。詳細は、「「設定」」を参照してください。

「コールバック」パネルには、次のオプションがあります:

表8-8 「コールバック」の属性

属性 説明
拡張 グラフ・ビジュアライゼーション内の選択した頂点を拡張する方法の詳細は、「拡張」を参照してください。
アクションの取得 データ・ソースからグラフ・アクションを取得する方法の詳細は、fetchActionsを参照してください。
永続 グラフ・アクションをデータ・ソースに永続化する方法の詳細は、persistを参照してください。
グラフ・データ更新 グラフ・データの更新時にイベントを処理するためのコールバック。
  • スタイル
    ページ・デザイナの「プロパティ・エディタ」で「スタイル」属性を使用してグラフをスタイル設定できます。
  • 設定
    ページ・デザイナの「プロパティ・エディタ」にある「設定」属性を使用して、レイアウトの切替え、エッジのグループ化、プロパティに基づいたグラフ・エンティティの発展の表示などの様々なグラフ設定を適用できます。
  • 拡張」
    グラフ内の選択した頂点を拡張し、ページ・デザイナの「プロパティ・エディタ」で「拡張」属性を使用して、隣接する頂点をフェッチできます。

親トピック: APEXグラフ・ビジュアライゼーション・プラグインの属性の構成

8.3.6.1 スタイル

ページ・デザイナの「プロパティ・エディタ」で「スタイル」属性を使用してグラフをスタイル設定できます。

  1. ページ・デザイナの左ペインにある「レンダリング」タブでグラフ・ビジュアライゼーション・コンポーネントを選択します。
  2. ページ・デザイナの右ペインにある「プロパティ・エディタ」で「属性」を選択します。
  3. 「スタイル」入力ボックスに、スタイル設定についての入力をJSON形式で入力します。
    Styleインタフェースの詳細は、プロパティ・グラフ・ビジュアライゼーションのOracle Graph JavaScript APIリファレンスのstylesを参照してください。

    次の例では、頂点スタイルを追加するためのJSON入力を示します。

    {
   "vertex":{
      "size":12,
      "label":"${properties.FirstName} ${properties.LastName}",
      "color":"#d5445a",
      "icon":"fa-user"
    }
}

    ノート:

    JSON入力に、「外観」パネル(頂点ラベル、エッジ・ラベルまたはラベルの最大長)ですでに設定されているプロパティについての設定が含まれている場合は、直接指定されているプロパティ値がJSON値より優先されます。

親トピック: 「拡張」および「コールバック」のオプション

8.3.6.2 設定

ページ・デザイナの「プロパティ・エディタ」にある「設定」属性を使用して、レイアウトの切替え、エッジのグループ化、プロパティに基づいたグラフ・エンティティの発展の表示などの様々なグラフ設定を適用できます。

  1. ページ・デザイナの左ペインにある「レンダリング」タブでグラフ・ビジュアライゼーション・コンポーネントを選択します。
  2. ページ・デザイナの右ペインにある「プロパティ・エディタ」で「属性」を選択します。
  3. 「設定」パネル内の「設定」入力ボックスに、目的のアクションについての入力をJSON形式で入力します。
    Settingsインタフェースの詳細は、プロパティ・グラフ・ビジュアライゼーションのOracle Graph JavaScript APIリファレンスのsettingsを参照してください。

    たとえば、次のJSON例では、layout構成とpageSize構成が示されています。 

    { 
"pageSize": 10,
"layout": "concentric"
}

    ノート:

    JSON入力に、「外観」パネル(「レイアウト」やエッジのグループ化など)または「設定」パネル(「ページ・サイズ」)ですでに設定されているプロパティについての設定が含まれている場合は、直接指定されているプロパティ値がJSON値より優先されます。

    次のJSON例では、グラフ・ビジュアライゼーションにネットワーク成長を追加するための構成のサンプルを示します。このグラフ・データの発展は、HireDateプロパティに基づいています。 

    {
    "evolution": {
        "chart": "line",
        "unit": "year",
        "vertex": "properties.HireDate"
    }
}

親トピック: 「拡張」および「コールバック」のオプション

8.3.6.3 拡張

グラフ内の選択した頂点を拡張し、ページ・デザイナの「プロパティ・エディタ」で「拡張」属性を使用して、隣接する頂点をフェッチできます。

  1. ページ・デザイナの左ペインにある「処理中」タブに切り替えて、送信後ノードに移動します。
  2. 右クリックして、コンテキスト・メニューからプロセスの作成を選択します。
  3. プロセスの名前を入力します。
  4. 「タイプ」にコードの実行を指定します。
  5. ソースの「場所」として「ローカル・データベース」を選択します。
  6. ソースの「言語」として「PL/SQL」を選択し、PL/SQLの入力ボックスに次のコードを入力します。
    DECLARE data clob;
    id VARCHAR2(100) := apex_application.g_x01;
    graph VARCHAR2(100) := '<graph_name>';
    hops NUMBER := <no_of_hops>;
    n NUMBER := hops - 1;
    match_clause VARCHAR2(100);
    query VARCHAR2(1000);

BEGIN
    IF n = 0 THEN
        match_clause := ' MATCH (x) -[e]-> (z) ';
    ELSE
        match_clause := ' MATCH (x) ->{,' || n || '} (y) -[e]-> (z) ';
    END IF;

    query := 'SELECT id_x, id_e, id_z
              FROM GRAPH_TABLE (' || graph ||  match_clause  || 
              'WHERE JSON_value(vertex_id(x), ''$.ELEM_TABLE'') || json_query(vertex_id(x), ''$.KEY_VALUE'' returning varchar2) = '''|| id ||'''
              COLUMNS (vertex_id(x) as id_x, edge_id(e) as id_e, vertex_id(z) as id_z))';
    SELECT <helper_function>(query) INTO data FROM sys.dual;
    htp.p(data);
END;

    前述のコードで:

    • <graph_name>: グラフの名前
    • <hops>: 拡張するホップの数
    • <helper_function>: ORA_SQLGRAPH_TO_JSON関数への入力としてSQLグラフ問合せのCURSORを提供しビジュアライゼーションのためのJSON出力を取得する関数の名前。
    なお、このプロセスでは、拡張する頂点のidが入力として受け入れられ、結果となる出力がJSONとして戻されます。
  7. 実行の「ポイント」としてAjaxコールバックを選択します。
  8. ページ・デザイナの左ペインにある「レンダリング」タブに切り替えて、グラフ・ビジュアライゼーション・コンポーネントを選択します。
  9. 右ペインにある「属性」タブに切り替えて、「コールバック」パネルの「拡張」入力ボックスに次のコードを入力します。
    const data = await apex.server.process('<process_name>', {
    x01: ids[0]
}, { dataType: 'text' });
try {
    return JSON.parse(data);
} catch (error) {
    return [];
}

    前述のコードでは、<process_name>は、ステップ3で指定したプロセスの名前です。

  10. 「保存」をクリックします。
  11. アプリケーション・ページを実行します。これで、グラフ内の特定の頂点で「拡張」(次の図で強調表示されている)をクリックできるようになりました。

    図8-8 特定のグラフ頂点での拡張

    図8-8の説明が続きます
    「図8-8 特定のグラフ頂点での拡張」の説明

    前の図の差し込み画像では、プラグインによってレンダリングされた、拡張された頂点を含むグラフが示されています。

親トピック: 「拡張」および「コールバック」のオプション