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

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

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

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

apex_plugin_attr.pngの説明が続きます
図apex_plugin_attr.pngの説明

このプラグインの属性のインタフェース・マッピングについては、プロパティ・グラフ・ビジュアライゼーションのGraph JavaScript APIリファレンスのインタフェースページを参照してください。

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

設定

属性 説明
ページ・サイズ ページごとに表示する、頂点およびエッジの数を指定します。
設定 グラフ設定をJSON形式で指定します。詳細は、「「設定」」を参照してください。
SQL問合せでページ区切りをサポートする paginateインタフェースを実装している場合は、このトグルをオンにします。

外観

属性 説明
レイアウト グラフのレイアウトを指定します。
エッジのグループ化 このトグルをオンにするとエッジがグループ化されます。
頂点ラベル 頂点ラベルに使用するプロパティを指定します。
エッジ・ラベル エッジ・ラベルに使用するプロパティを指定します。
ラベルの最大長 ラベルの最大長を指定します。
モードの表示 このチェック・ボックスを選択すると、次のオプションを含むモード・パネルが表示されます。
  • 選択:
  • 画面に合せる
  • 固定モードの切替え
探索の表示 このチェック・ボックスを選択すると、次のグラフ探索アクションが表示されます。
  • 削除 - 選択した頂点を削除する
  • グループ化 - 選択した頂点をグループ化する
  • グループ化解除 - 選択した頂点のグループ化を解除する
  • 前回の操作を元に戻す
  • 前回の操作を再実行
  • ビジュアライゼーションをそのデフォルト状態にリセットする
スタイル スタイル構成をJSON形式で指定します。詳細は、「スタイル」を参照してください。

コールバック

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

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

8.3.1 設定

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

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

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

8.3.2 スタイル

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

  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値より優先されます。
    • このプラグインでは、Font APEXライブラリ内のアイコンがサポートされています。

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

8.3.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-3 特定のグラフ頂点での拡張

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

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

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