エッジレイヤー
すべての関係が似ているグラフは、グラフが表示された瞬間に読めなくなります。 複数の 種類 の関係。 エッジレイヤー の 3 つが必要です。 それを修正すると、これらは一緒に使用されるようになります。
- 種類に名前を付けてください —
render.edgeTypeAccessor。 - バラバラにスタイル —
render.edgeStyleMap。 - スイッチをオフにします —
UI.filter.edgeFacets、ライブトグルとして表示されます フィルター パネル、およびオプションで 凡例セクション として使用できます。
const options = {
render: {
edgeTypeAccessor: (edge) => edge.getData()?.kind,
edgeStyleMap: {
reference: { strokeColor: '#428bca' },
correlation: { strokeColor: '#888888', dashed: true, animateDash: false },
sighting: { strokeColor: '#f39a1f', dashed: true, markerEnd: 'circle' },
},
},
UI: {
filter: { edgeFacets: [{ key: 'kind', label: 'Relationship' }] },
},
}レイヤーをオフにしてもグラフは移動しません
これは、機能全体が構築されるプロパティです — を参照してください。 切り替えはレンズです。レイアウト、選択範囲、カメラが少しずつ戻ってきます オプトインしない限り、同一です 未接続ノードの非表示。
品種の命名とスタイリング
edgeTypeAccessor と edgeStyleMap ミラー nodeTypeAccessor / nodeStyleMap 正確には: アクセサーは文字列 (または undefined) を返し、マップはその文字列を Partial<EdgeStyle> はデフォルトのエッジ スタイルにマージされます。
render: {
edgeTypeAccessor: (edge) => edge.getData()?.kind,
edgeStyleMap: {
reference: { strokeColor: '#428bca', strokeWidth: 2 },
contains: { strokeColor: '#5cb85c', markerEnd: 'diamond' },
},
}すべての EdgeStyle プロパティは公正なゲームです — strokeColor、strokeWidth、opacity、 curveStyle、dashed、animateDash、markerEnd、markerStart、rotateLabel。 dashed エッジはデフォルトでダッシュをアニメーション化します。種類に animateDash: false を設定します 落ち着いた背景の文脈として読み取れるはずです。
種類のないエッジ、またはマップに記載されていない種類のエッジは、デフォルトのエッジを維持します。 スタイル。何も警告しません。スタイルのない種類は正当な選択です。
優先順位
ノードと同じ順序で、最も狭いものが勝ちです。
| 優先順位 | どこで |
|---|---|
| 1 (勝ち) | エッジ自身の style.styleCb — 以下の警告を参照 |
| 2 | エッジ自身の静的 style プロパティ |
| 3 | render.edgeStyleMap[kind] |
| 4 | render.defaultEdgeStyle.styleCb |
| 5 | render.defaultEdgeStyle リテラル |
2 つの styleCb の役割は同じものではなく、保持する価値があります。 真っ直ぐ。エッジの own スタイルでは、完全に勝つオーバーライドです。に render.defaultEdgeStyleこれは、デフォルトスロットの計算された形式であり、埋められます。 エッジごとの styleCb が省略されたものを含む、これより狭いセットのみです。 callback-beats-static ではなく、特異性の順序付け。
エッジ自体の styleCb がその層全体を置き換えます
エッジ自身のスタイルが styleCb を宣言すると、その戻り値は only になります その層のソース: エッジ自身の静的プロパティ * と * edgeStyleMap は両方とも スキップされ、defaultEdgeStyle のみがギャップを埋めます。それで styleCb が戻ってきます strokeColor を設定するエッジ上の { strokeWidth: 4 } はその色を失い、 品種の色も失われます。コールバック * と * の種類のスタイリングが必要な場合は、次のようにします。 コールバック内を検索するか、コールバックを render.defaultEdgeStyle に置きます。ここで、 代わりにマップに屈します。
キャンバス レンダラーの解像度が低い
renderers/canvas は edgeStyleMap を尊重しますが、9 つのうち 4 つだけを読み取ります EdgeStyle のプロパティ。 SVG レンダラー (デフォルト) はそれらをすべて解決します。
種類をレイヤーにする
スタイリングの種類を分けるだけでは、まだ半分に過ぎません。 UI.filter.edgeFacets はどのエッジかを宣言します 寸法は切り替え可能:
UI: {
filter: {
edgeFacets: [{ key: 'kind', label: 'Relationship' }],
},
}{ key: 'kind' } は完全な宣言です。エッジファセットはエッジ形状を持っています デフォルト: レイヤーは multiselect で、そのオプションは 実際のエッジが実際に持つ個別の値なので、選択肢を提供することはできません それは空になって戻ってきます。
ここに自動派生されるものは何もありません。 ノード ファセット とは異なります。 データのスキャンに戻ると、edgeFacets が正しく動作しないことを宣言するグラフが表示されます。 レイヤーについて聞いたことがない人のように。エッジの可視性はあまりにも重要なので、 推測してください。
フィルター パネルは Relationships セクションを成長させます: 種類ごとに 1 行、それぞれに ラインスウォッチとカウントを適用し、一度に — その上の属性フィールドのように、 その横にある伝説。このパネルでは、適用ボタンの後に待機するものは何もありません。
レイヤーではないファセット
type は、完全な ファセット語彙 — text を受け入れます、 regex、select、multiselect、numberRange、boolean — accessor と predicate プレーン データ キーではないディメンションの場合:
edgeFacets: [
{ key: 'kind', label: 'Relationship' }, // a layer
{ key: 'weight', label: 'Confidence', type: 'numberRange' }, // a batch control
{
key: 'recent',
label: 'Seen this week',
type: 'boolean',
accessor: (edge) => Date.now() - edge.getData().seenAt < 7 * 864e5,
},
]複数選択の種類のみがライブトグルです。それ以外はすべてバッチ制御なので、 ノード ファセットと並んでパネルのアトリビュート フォームにレンダリングされます。 ボタンは適切なアフォーダンスです。
オプション
| オプション | 種類 | デフォルト | 何をするのか |
|---|---|---|---|
key | string | — | フィルター ID。 setEdgeFilter(key, …) はこれを受け取ります。 |
label | string | かわいいkey | 逐語的に使用されるため、翻訳レイヤーから取得することができます。 |
type | FilterFacetType | 'multiselect' | レイヤーは、それぞれオンまたはオフの種類のセットです。 |
options | array | (graph) => array | 派生した | リビルドごとにライブグラフに対して解決されます。 |
matchMode | FilterMatchMode | 'exact' | |
accessor | (edge) => unknown | edge.getData()[key] | 計算されたファセットを可能にするもの。 |
predicate | (edge, value) => boolean | — | 完全な制御。 accessor / matchMode に勝ちます。アプリケーションごとにエッジごとに実行されるため、コストを抑えます。 |
order | number | 申告順序 | パネル内の表示順序。 |
切り替えはレンズであり、レイアウトの変更ではありません
レイヤーをオフにすると、どの線が描画されるかだけが変更され、それ以外は変更されません。ノード 位置、選択範囲、カメラはビットごとに変更されず、 シミュレーションが再開されます。
これは意図的なものであり、プロフェッショナル ツールが行うことです。vis-network はこれを実行します。 エッジごとの hidden * および* 個別のエッジごとの physics、シグマの edgeReducer レイアウト、Cytoscape には決して到達せず、要求された場合にのみ KeyLines 再レイアウトします。あ 非表示関係は表示決定です。相関レイヤーを非表示にした場合、リフローが行われました。 グラフでは、トグルを使用してグラフ (ポイント全体) を読み取り することはできませんでした。
それを変える唯一のことはオプトインであり、ノード側では次のようになります。 UI.filter.hideDisconnected はレイヤー内のノードを非表示にします ストランド。これらのノードがシミュレーションから離れるため、グラフが再安定します。これが、 デフォルトでオフになっている理由と、レイヤー コントロールが行うものではなくノード フィルターである理由 それ自体で。
機械的に、Edge は 2 番目のフラグを成長させました。
| プロパティ | 意味 |
|---|---|
layerVisible | このエッジのレイヤーがオンになっているかどうか。 visibleに対して拒否権。 |
visibleIgnoringLayer | すべてのレイヤーがオンになっている場合、visible はどうなるでしょうか。エンドポイントと手動非表示の理由だけです。 |
setLayerVisible(on) | レイヤーを切り替えてvisibleを再導出します。何か変更があったかどうかを返します。 |
representedEdges | 代役として：それが物語る真のエッジ。リアルエッジでは未定義。 |
リンクはゲートを visibleIgnoringLayer に強制するため、レイヤーがオフになっているエッジはオフになります。 エンドポイントをまとめます。 visible はエンドポイント フィルタリングによっても書き込まれます そして hideNode / showNode までに、これがレイヤー状態がそこから離れて存在する理由です。
表示されるエッジのないノードは表示されたままになります
それを非表示にすることは、node フィルターの決定となり、エッジ ファセットがそれを採用することはありません。 必要に応じて、フィルター パネル または queryEngine.setFilter を使用してください。 欲しい。
空のピックはすべてのレイヤーがオフになっていることを意味します
ノードの複数選択の場合、空のリストはパネルで unset と綴られます — いいえ 制約。エッジ層コントロールは、オンのままのものを正確に書き込みます。 レイヤ リストは、すべてのレイヤがオフであることを意味します。それが意味するものは他に何もありません、そしてそれは これが、エッジ セクションに「最後のセクションをオフにできない」という制限がない理由です。
凡例のレイヤーにキーを設定する
legend セクションで scope: 'edge' を宣言すると、その種類が 線 スウォッチ — レンダラーが解決したストロークの色、ダッシュ、マーカー — 同じドッキングされたカード内のノードスコープのセクションの隣に配置されます。
UI: {
legend: {
sections: [
{ key: 'type', title: 'Element' }, // nodes
{ key: 'kind', title: 'Relationship', scope: 'edge' }, // edges
],
},
}- 一致する
edgeFacets宣言が与えられると、セクション ** はそのファセット** を駆動します。 パネルと凡例は 1 つのフィルターの 2 つのビューになり、それぞれがもう一方の後に続きます。 - 1 つがない場合は、独自のファセットが確保され、フィルタリングが行われるため、凡例は次のようになります。 決して単なる装飾ではありません。
keyもentriesも含まれていないセクションは、正確にrender.edgeTypeAccessorを使用します。 ノードセクションはnodeTypeAccessorにフォールバックします。- カウントは real エッジです: 折りたたまれたクラスターの代役は除外されるため、 count はリレーションを二重に報告することはありません。
スウォッチのカラーはレンダラーがペイントしたものから サンプリング されるため、一種のレンダリングが行われます。 複数の色が最初の色を保持し、警告します。 entries を自分で宣言してください color 種類がストロークでエンコードされたものではない場合。
崩壊したクラスター
クラスターが閉じている間、内側に端があるエッジがクラスターに描画されます。 代わりに、任意の深さで。端が画面共有上の同じ 2 つのノードに到達するエッジ 1 行、代役 なので、1 行でいくつかの実際の関係を表すことができます。 種類。スタンドインは描画のみです: getEdges() とテーブルの [エッジ] タブ リストは実際です エッジ。
したがって、各代役は representedEdges を持ち、任意 の間存続します。 そのうちのフィルターを通過します。知っておく価値のある 2 つの結果:
- レイヤーを非表示にすると、その背後にあるすべてのリレーションが非表示になった場合にのみ、スタンドインが非表示になります。
referenceとcorrelationの両方を表す線は、どちらかが存在する間は残ります。 がオンになっています。 - すべてのファセット タイプは、折りたたまれたクラスター内に到達します -
numberRangeまたはpredicate、単なる種類のリストではなく、ファセットが 代役自身の (空の) データではなく、実際のエッジを使用します。
単一エッジの代用はそのエッジのように点線で表示され、クリックすると 端。いくつかの代役は単純であり、それを選択すると、それがどれだけのエッジを立っているかが表示されます のために。
コードから操作する
エッジ ファセットはコンストラクターに登録されるため、プログラムによるフィルター処理が機能します。 すべてのモード — パネルのみfull モードのクロームです。
graph.queryEngine.setEdgeFilter('kind', { value: ['reference'], matchMode: 'exact' })
graph.queryEngine.getHiddenEdgeCount() // 12
graph.queryEngine.removeEdgeFilter('kind') // every layer back on| 方法 | 何をするのか |
|---|---|
setEdgeFilter(key, config) | エッジ フィルターを 1 つ書き込みます。 |
getEdgeFilters() | プレフィックスのないアクティブなエッジ フィルター。 |
removeEdgeFilter(key) | 1 つ削除すると、そのレイヤー セットが元に戻ります。 |
getHiddenEdgeCount() | レイヤーによって隠されるエッジの数。 |
getEdgeFacetValues(key) | それぞれカウントとサンプル エッジを持つ個別の値。 |
setEdgeFacets(facets) | 宣言されたセットを置き換えます。 |
registerEdgeFacet(facet) | 追加的に追加します。凡例セクションがそれ自体を予約するために使用するものです。 |
replaceFilters(ownedKeys, filters) | 自分が所有するキーのみを交換し、他のキーはそのままにしておきます。 |
ノード フィルターとエッジ フィルターは 1 つの GraphFilters レコードを共有し、エッジ キーはその下に保持されます。 edge: プレフィックス (EDGE_FILTER_PREFIX、GraphQueryEngine からエクスポート) なのでキー name は、ノード ファセットとエッジ ファセットを同時に指定できます。上記のすべてのメソッドは、 接頭語;生のレコードを読んだ場合にのみ満たされます。
renderer.getEdgeStyle(edge) はパブリックであり、レンダラーが実際にスタイルを返す 解決済み — 凡例のスウォッチが構築されているのと同じ呼び出し、およびアサート方法 あなたが宣言したものが描かれているのかどうかのテストです。
こちらも参照
- エッジレイヤーギャラリーカード — 3 つすべて 1 つのキャンバス上の表面
- レンダリング オプション — アクセサー/マップ ペアの半分のノード
- フィルタ — ノード ファセット、およびボキャブラリ エッジ ファセットの再利用
- 凡例 — セクション、およびスウォッチで認識できることと認識できないこと