Pivotick

日本語

English
简体中文
Français
Deutsch
Português
Nederlands
العربية
Español

日本語

English
简体中文
Français
Deutsch
Português
Nederlands
العربية
Español

外観

凡例 ​

UI.legend は、キャンバスの隅に legend をドッキングします。カテゴリごとに 1 行、それぞれに 色見本、ラベル、およびその背後にあるノードの数。行をポイントするとライトが点灯します キャンバス上のそのカテゴリ。いずれかをクリックすると非表示になるため、凡例が UI で最も高速なフィルター。

ts
const options = {
    UI: {
        legend: { key: 'type', title: 'Node type' },
    },
}

そのブロックはまったく必要ないかもしれません。UI.legend がないと、そのブロックに凡例が ** 表示されます。 グラフの色が宣言された render.nodeTypeAccessor によって説明される場合、独自の** — デフォルトでオンを参照してください。 UI.legend: false はオフになります。

複数のものを一度にエンコードするグラフには、いくつかのキーが必要です: pass sections 単一のキーの代わりに — 一度に複数のキー を参照してください。

凡例はクロムの一部であるため、full および light モードでのみ表示されます — viewer と static には何もありません。

伝説は何も色を付けない

凡例は 説明的な です。レンダラーがすでに解決した色を読み取ります。 ノード (renderer.getNodeStyle(node).color) を生成し、それを報告します。色がその場に残る は: render.defaultNodeStyle.color、render.nodeStyleMap、またはノードごとのスタイル — 通常は ColorPaletteMapper 経由です。 パレットを変更すると、凡例が自動的に追従します。

デフォルトでオン ​

伝説は、それが真実を語ることが保証されている場合にのみ、尋ねられずに示す価値があります。 自動的なものは、推測ではなく、すでに宣言したものから始まります データについて: render.nodeTypeAccessor、あなたが指す次元 nodeStyleMapで。

ただし、候補があるだけでは十分ではありません。ディメンションは、データを分割せずにデータを分割できます。 その色と何か関係があります。したがって、何かをレンダリングする前に、凡例を この次元 ** が色** を説明していることを確認します。

  • すべてのカテゴリは正確に one の色に解決されます。
  • 少なくとも two の異なる色があります (そうでない場合、色はわかりません) カテゴリは別として）;
  • カテゴリは最大で 24 です。ID のようなディメンションは、カテゴリごとに 1 つの値を生成します。 ノードはそれぞれ独自の色を持ち、そうでなければ上記のチェックを通過します。

これらのいずれかが失敗した場合、凡例は表示されず、何も記録されません。凡例は要求されていません。 自動凡例も 5000 ノード を超えてスキップされ、すべてのノードのサンプリングが行われます。 色は招待されていないのにお金を払う価値はありません—それは警告しているので、欠席は 説明可能な。 UI.legend (または true) を宣言すると、両方が解除されます。

ts
// nothing declared → a legend appears iff `type` explains the colours
render: { nodeTypeAccessor: (node) => node.getData().type, nodeStyleMap: { … } }

UI: { legend: false }   // never
UI: { legend: true }    // derive from nodeTypeAccessor, check or no check
UI: { legend: { position: 'top-right' } }   // automatic entries, your placement

自動凡例キーはデータ キーではなくアクセサーに設定されるため、 フィルターを宣言されたファセットと共有します — それに それについては明示的に key 。

エントリの出所 ​

データキーから派生 ​

key は一般的な場合の構成全体です。次の個別の値です。 node.getData()[key] は、最初に見た順に、値のラベルが付けられた行になります。 それ自体。

ts
UI: { legend: { key: 'type' } }

配列値 キーは要素ごとに 1 行を提供し、ノードは以下のようにカウントされます。 それぞれ (tags: ['public', 'critical'] は両方の下に表示されます)。

派生行について知っておく価値のあることが 2 つあります。

  • キー (null、undefined、'') に値** がない**ノードは行を取得せず、 凡例はそれらを隠すことはできません。凡例はリストされているカテゴリにのみ作用します。開発時間 警告では、キーの名前と、表現されていないノードの数が表示されます。
  • 複数の色でペイントされたカテゴリ は、最初に見つかった色を保持し、 警告: 1 つの行には 1 つのスウォッチのみを表示できます。次の場合はエントリを自分で宣言します。 グループ化は実際には 1 つの色ではありません。

宣言されたエントリ ​

カテゴリが単純なデータ キーではない場合、つまり計算されたグループ化である場合は、entries を渡します。 翻訳されたラベル、固定カラースケール。各エントリには独自の predicate が含まれます。 これがトグルでフィルターされるものです。

ts
UI: {
    legend: {
        title: 'Tier',
        entries: [
            { id: 'edge', label: 'Edge', color: '#0072B2',
              predicate: (node) => node.getData().type === 'web' },
            { id: 'storage', label: 'Storage', color: '#009E73',
              predicate: (node) => ['database', 'cache'].includes(node.getData().type) },
        ],
    },
}

entries はグラフの ** 関数** である場合もあり、データが更新されるたびに再解決されます。 変更されるため、宣言を変更せずにリストがデータに従います。

ts
UI: {
    legend: {
        key: 'type',
        entries: (graph) => distinct(graph, 'type').map((type) => ({
            id: type,
            label: t(`type.${type}`),        // translated, used verbatim
            color: palette.getColor(type),
        })),
    },
}

entries と key の両方を宣言することは、上に示した有用な中間点です。 エントリはラベルと色を与え、key はデフォルトの述語を提供します (data[key] === id) が含まれていないエントリーの場合。どちらの警告もないエントリ そして何も一致しません。

行のトグル状態は再解決後も存続します。データから消えるエントリ 隠れた幽霊として残るのではなく、それを失います。

一度に複数のキー ​

3 つのことをエンコードしたグラフ - 塗りつぶされた種類、囲いの中の出所、 ストローク内の関係 — 1 つではなく 3 つのキーが必要です。 sections を渡すとそれぞれが得られます 独自のタイトル付きブロック。ドッキングされた 1 つのブロック内に 宣言順 で上から下に積み重ねられます。 カード:

ts
UI: {
    legend: {
        position: 'bottom-left',        // the card docks; sections don't
        sections: [
            { key: 'type',  title: 'Element' },
            { key: 'scope', title: 'Provenance' },
            { key: 'tlp',   title: 'Sharing', filterable: false },
        ],
    },
}

セクションには、1 つの凡例に属するすべてのものが含まれますが、position は例外です。 カード。セクションは他のあらゆる点で独立しています: 独自のエントリ、独自の カウント、独自のフォールド状態、独自のフィルター。

フィルターと併用 ​

各フィルタリング可能なセクションは ** 独自のフィルタ** を駆動し、クエリ エンジンはそれらを処理します。 最初のセクションでは attribute をオフにし、2 番目のセクションでは self をオフにします。 キャンバス上に残るのは、****でもないノードです。各セクションのshow all そのセクションのみをクリアします。

セクションは __legend:<id> に書き込みます。ID はセクションの id で、それ以外の場合はセクションの ID です。 key、それ以外の場合はスタック内の場所 (section-0)。 単一キー 凡例 — オブジェクト フォーム — これまで使用してきたプレーンな __legend を維持します。孤独な伝説と同じように、セクション その key は、宣言された select / multiselect ファセットに名前を付けます 代わりに がそのファセット を駆動し、その兄弟は 影響を受けません。

ノードの代わりにエッジをキーイングする ​

scope: 'edge' を宣言するセクションには、グラフの 関係の種類 と線 がリストされます。 スウォッチ — レンダラーが解決したストロークの色、ダッシュ、マーカー — とその切り替え ノードではなくエッジレイヤーを非表示にします。同じカード内のノードスコープのセクションの隣に配置されます そしてそれらをそのままにしておきます。機能全体については、エッジレイヤーを参照してください。

ts
UI: {
    legend: {
        sections: [
            { key: 'type', title: 'Element' },
            { key: 'kind', title: 'Relationship', scope: 'edge' },
        ],
    },
}

スタイルを設定する寸法の名前付け ​

key も entries も付いていないセクションは、すでに宣言されている次元です。 render.nodeTypeAccessor — スタイル ディメンションのスペル。 プレーンデータキー。 sections リスト内の カラーチェック をスキップします。 あなたがそれを求めたのです。これを実行できるのは 1 つのセクションだけです。 2 番目のメッセージは警告とともにドロップされます。

ts
UI: { legend: { sections: [{}, { key: 'scope', title: 'Provenance' }] } }
//                         ↑ whatever nodeTypeAccessor returns, headed "Type"

カラーディメンションをキーオフしたセクション

スウォッチはレンダラーが解決した色から サンプリング され、それが唯一のものです 凡例が読み取ることができるチャネル。色がエンコードされない次元でキー設定されたセクション — 来歴、来歴がエンクロージャとして描画される場合 — 最初の色を取得します 各カテゴリのノードを作成し、そのカテゴリが複数のノードをレンダリングすることを警告します。宣言する entries と独自の color をそのセクションに追加して、意味のある見本を作成します 何か。

宇宙 ​

セクションは個別に折りたたまれます。 alt を押しながら任意の山形をクリックして、全体を折りたたむか展開します 一気に積み上げます。各セクションは引き続き独自のリストを maxVisibleEntries 以降までスクロールします。 カード全体がキャンバスの高さに合わせて制限され、スクロールするのではなく それを超えて成長するため、6 つのセクションがビューポート内に残ります。

エントリなし (ノードが保持しないキー、空のキー) に解決されるセクション 宣言) は、空のタイトルのボックスとして表示されるのではなく、完全にスキップされます。カード セクションがすべて空の場合は、何もレンダリングされません。

カテゴリにカーソルを合わせる ​

行をポイントすると、キャンバスに答えが表示されます。カテゴリが表す要素は、 見てください、ポインタが離れるまで他のすべてが暗くなります。何もフィルタリングされておらず、 何も動かないので、決定する前にカテゴリがどこにあるかを見つける安価な方法です。 スイッチを切るかどうか。

scope: 'edge' セクションの行が点灯します 線。ノードは他のレイヤーとともに後退します。折り畳まれたエッジ 閉じたクラスターまたは simplify グループは、その場所に描かれた線を照らします。

すでにオフになっているカテゴリをポイントしても何も暗くなりません - 何も表示されません 点灯するまでキャンバスの上に置いておきます。

highlightOnHover: false は一定の期間オフになります。 A filterable: false キー 行が行う唯一の機能であるハイライトも表示されます。

同じセットをコードから点灯させることができ、クリアされるまで保持されます。

js
graph.emphasiseElements(graph.getMutableNodes().filter((node) => node.getData()?.type === 'md5'))
graph.clearEmphasis()

どちらもレンダラーが描画した要素を取得するため、 getMutableNodes() / と読み取られます。 クローンゲッターではなく getMutableEdges() です。

フィルタリング ​

行を切り替えるとフィルターが graph.queryEngine に書き込まれます — 同じエンジンです フィルターパネルドライブ — つまり、2番目の並列ではありません メカニズム:

  • トグルの後に が追加されたノードは、非表示のカテゴリにあり、非表示で到着します。
  • 非表示のカテゴリは、展開されたクラスターのサブグラフ内に隠されたままになります。
  • resetFilters()、またはパネルの リセット は、各行を再点灯します。
  • 表示されるすべての行でフィルターは 削除 になるため、ヘッダーのアクティブフィルター数は 何も隠していない伝説は報告しません。

デフォルトでは、凡例は一致する独自の予約済みフィルター キー (__legend) を所有します。 述語を介して — セクションごとに 1 つ、名前空間が __legend:<id> で、 積み重ねフォーム。

パネルとフィルターを共有する ​

key が宣言された select / multiselect に名前を付けるとき ファセット、凡例は代わりに そのファセットのキー を駆動します。 凡例とパネルは 1 つのフィルターの 2 つのビューになります。スウォッチをオフに切り替え、 パネルの複数選択によりその値が削除されます。パネルと凡例内の値を選択します それに応じて再点灯します。

ts
UI: {
    filter: { facets: [{ key: 'type', label: 'Type', type: 'multiselect', options: … }] },
    legend: { key: 'type' },   // ⇒ writes setFilter('type', …)
}

パネルの言語を話すことによる 2 つの結果:

  • 空 複数選択は、パネルに対する 制約なし を意味するため、凡例はできません Express "すべてを隠す": 最後に表示された行は、書き込みではなく無効になります。 グラフ全体を元に戻す値。独自のキーの凡例にはそのようなものはありません 限界。
  • キーに 値がない を持つノードは、どの選択によってもそのまま非表示になります。 パネルからフィルタリングするとき。

key が別のタイプのファセット (text、regex、numberRange、boolean) に名前を付ける場合、 凡例は独自のキーと警告を保持します。値リストはそこでは意味がありません。

トグルを読む ​

すべての切り替えは、データ イベント バス で通知されます。

ts
graph.on('legendToggle', ({ section, hidden, visible }) => {
    localStorage.setItem(`legend.hidden.${section}`, JSON.stringify(hidden))
})

section は切り替えられたセクションの ID で、hidden / visible は切り替えられたセクションの ID です。 セクションの行。単一キーの凡例は、それ自体の派生 ID (その key、それ以外の場合) を報告します。 section-0）。

復元は、レジェンドが行う呼び出しと同じです。

ts
graph.queryEngine.setFilter('__legend', { value: visible, matchMode: 'exact' })

実行時に凡例を変更する ​

graph.setLegend(config) は UI.legend をライブで置き換えます。何もせずに始まったグラフ legend はその場でビルドされたものを取得し、false でそれを削除します。フィルターをクリアします。 したがって、消え去った伝説の背後には何も隠されていません。

ts
graph.setLegend({ key: 'zone', title: 'Region' })
graph.setLegend({ sections: [{ key: 'zone' }, { key: 'tier' }] })
graph.setLegend(false)        // remove it
graph.setLegend(true)         // back to the derived one

2 つのフォーム間を交換すると、フィルター キーの名前が変更されるため、フォームのフィルターは 左側は削除されます。消えたセクションの背後には何も隠されていません。

オプション ​

UI.legend は boolean も受け取ります: false は凡例を抑制し、true は凡例を導き出します 最初に色を調べずにrender.nodeTypeAccessorから。以下のすべては、 オブジェクトの形。

積み重ね の形式は { enabled?, position?, sections }: sections はリストです 以下のposition と enabled / position でカード全体を説明します。

オプション種類デフォルト何をするのか
enabledbooleantruefalse は宣言を保持しますが、何も表示しません (legend: false と同じ)。
idstringkey、それ以外の場合は section-<index>セクション ID: フィルター キー (__legend:<id>) と legendToggle section フィールド。
titlestringかわいい key、それ以外は 'Legend'ヘッダー テキスト。そのまま使用されます (翻訳可能です)。
keystring—行の派生元のデータ キー、および宣言されたエントリのデフォルトの述語。これと、自動 凡例の entries の両方を省略します。
entriesLegendEntry[] | (graph) => LegendEntry[]—宣言された行。関数はデータ変更時に再解決されます。
position'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'full モードでは 'bottom-right'、それ以外の場合は 'bottom-left'キャンバスのどのコーナーにドッキングするか。カードに属するため、セクション オプションではありません****。 'top-left' はアンカーをコンテキスト ツール パネルと共有し、開いている間は凡例をカバーします。
collapsiblebooleantrueタイトルに折り畳む山形を表示します。
collapsedbooleanfalse折りたたんで開始します。
showCountsbooleantrueカテゴリごとのノード数を表示します (グラフ全体にわたって、切り替え時にちらつきません)。
filterablebooleantruefalse は、プレーンな非対話型キーをレンダリングします。
highlightOnHoverbooleantrue行にカーソルを置くと、キャンバス上のそのカテゴリが点灯し、残りのカテゴリが暗くなります。
maxVisibleEntriesnumber12凡例内でリストがスクロールする前に表示される行。

LegendEntry は { id, label?, color, badge?, predicate?, order? } です。 id は行の ID、フィルターに書き込まれる値、ラベルのフォールバック。

ノードが塗りつぶしではなく バッジ によって区別される場合、次のようにします。 badge というエントリと行には、ドットの代わりにマークが表示されます。それは次のように描かれています キャンバスがそれを描画し、color という名前のバッジがエントリを受け取ります。フィルタリングは変更されません。

js
{ id: 'enriched', label: 'From enrichment', color: '#8b5cf6',
  badge: { svgIcon: sparkle }, predicate: (node) => node.getData().enriched }

maxVisibleEntries はレジェンドの高さの 1 つの天井です。キャンバスはもう一方です。

full モードでは、凡例はデフォルトで右下にドッキングし、ミニマップの上に積み重ねられます。 このモードもマウントされます。左の列はモード レールとそのパネルに属し、 パネルが設定シートではなくワークスペースであるレールモードは十分に到達します それを押して、凡例を 1 行のままにします。ミニマップが選択したコーナーを共有する場合、 凡例はその上に配置され、折りたたまれたり、サイズが変更されたり、マウント解除されたりするときにそれに続きます。

bottom-left 凡例はその列をモード レールと共有するため、短いビューポートでは それらの間の部屋に縮まり、着地した行でスクロールします。 レールの下で育つよりも。勝手にコーナーを移動することはありません。

インタラクション ​

ジェスチャー効果
行にカーソルを合わせるキャンバス上のそのカテゴリを明るくし、他のすべてを暗くします
行をクリックしますそのカテゴリを非表示/表示します
Alt を押しながら行をクリックそのカテゴリのみを表示
ヘッダー すべて表示すべての行を再点灯します (凡例のフィルターをクリアします)。
ヘッダー反転表示されるカテゴリを入れ替える
ヘッダー シェブロンそのセクションをタイトルに合わせて折りたたむ
Alt を押しながら山形をクリックしますすべてのセクションを一度に折りたたんだり展開したりできます

行は実際のボタンです: タブにアクセス可能、Enter / Space トグル、および aria-pressed 状態を担います。非表示の行は、中空のスウォッチ ** と** の淡色テキストで描画されます。 色だけが信号ではありません。

フィルター可能な凡例 ギャラリー カードを参照してください 実際の例については、 LegendOptions / LegendGroupOptions フルタイプ。