NodeStyle.tiers 間のノードのスワップをカバーします。 NodeStyle.focusTier 到着と出発の図とラベルの交差 GraphRendererOptions.minLabelFontSize。送信される図面は、独自のレイヤーがあり、2 つは互いにフェードアウトするため、スワップ中にノードが存在しないことはありません。重なり合う部分だけ少しだけ柔らかくなります。

画面上のすべてのノードが同時にしきい値を超えるため、これは同じ時点で開始されます。ノードが変化するとフェードします。 prefers-reduced-motion はオフになります。

それぞれ 140x44 カードを保持する 210 ノードで測定: フェード自体にはコストはかかりません。キャンバスは全長にわたって 60fps を保持しますが、送信される多くのカードは維持されます。瞬間的に、交差点がすでに費やしている 1 フレームに約 26 ミリ秒が追加されます。に設定しますグラフ上の 0 は、遷移よりもそのフレームが重要です。

デフォルト

dragEnabled

dragEnabled: boolean

定義: interfaces/RendererOptions.ts:313

デフォルト

true

edgeStyleMap?

optional edgeStyleMap: Record<string, Partial<EdgeStyle>>

定義: interfaces/RendererOptions.ts:223

エッジの種類をそのスタイルにマップします。

各キーはエッジの種類 (edgeTypeAccessor によって返される) であり、部分的なEdgeStyle。エッジ自身の styleCb が依然としてマップ上で勝利を収めています。 nodeStyleMap と同様です。

備考

edgeTypeAccessor と組み合わせて使用されます

例

edgeStyleMap: {
  'object-reference': { strokeColor: '#428bca' },
  'correlation': { strokeColor: '#888', dashed: true },
}

edgeTypeAccessor()?

optional edgeTypeAccessor: (edge) => string | undefined

定義: interfaces/RendererOptions.ts:204

エッジの種類にアクセスする関数 — 寸法 edgeStyleMap キーがオン、および edge 凡例セクションとエッジフィルターファセットが派生するもの独自のデータキーが与えられていないときから。

パラメータ

edge

Edge

返品

string | undefined

備考

edgeStyleMap と組み合わせて使用されます

例

edgeTypeAccessor: (edge) => edge.getData()?.kind

enableFocusMode

enableFocusMode: boolean

定義: interfaces/RendererOptions.ts:228

ノードが選択されているときに、接続されていないノードとエッジをグレー表示にするかどうかを制御します

デフォルト

true

enableNodeExpansion

enableNodeExpansion: boolean

定義: interfaces/RendererOptions.ts:234

ノードを展開して子を表示できるかどうかを制御します。 false は、シェブロン、Enter ショートカット、および破線の折りたたまれたアウトラインも削除します。

デフォルト

true

fitAnchor?

optional fitAnchor: string

定義: interfaces/RendererOptions.ts:311

ID によって、minFitScale にフィットするノードが中心になります。折りたたまれたノードのグループそれを代弁します。ビューはコンテンツの端で停止するため、アンカーの近くにアンカーが表示されます。キャンバスのそっち側に近い。設定を解除するか描画しない場合、フィットはコンテンツの中心に配置されます。

focusTierTrigger?

optional focusTierTrigger: "off" | "selection" | "both" | "hover"

定義: interfaces/RendererOptions.ts:245

ノードの NodeStyle.focusTier の描画が起動したとき。スタイルが何を重視しているのかを物語る図面は;これは、いつということです。

選択は、独自に選択されたノード (50 個のボックス選択) のみをプロモートします。重なり合うカードの壁になります。 'off' は編集せずに動作を抑制します他の人のプリセットを埋め込むインテグレータが必要とするスタイルです。

デフォルト

'both'

groupOutline()?

optional groupOutline: (group) => string | void | HTMLElement

定義: interfaces/RendererOptions.ts:173

オープングループ上のチップがそのラベルの代わりに表示するもの。文字列は次のように表示されますテキスト。チップは閉じたマークを維持し、クリックするとグループを元に戻します。ラベルを保持する場合は何も返しません。

パラメータ

group

GroupInfo

返品

string | void | HTMLElement

groupStyle()?

optional groupStyle: (group, base) => void | Partial<NodeStyle>

定義: interfaces/RendererOptions.ts:167

UI.simplify によって作成されたグループの外観を、デフォルトのディスクに重ねて表示します。リング内のタイプの色、スペースがある場合のディスク上のカウント、ラベル以下。グループはノードとして描画されるため、tiers、focusTier、html、shape、 badges は 1 つと同じように機能します。デフォルトを維持する場合は何も返しません。

base は、ライブラリが描画するスタイルです。返されたものがそのキーに置き換わります。層を追加するときにディスク上のカウントを維持するには、base.tiers を広げます。

パラメータ

group

GroupInfo

base

Readonly<Partial<NodeStyle>>

返品

void | Partial<NodeStyle>

例

groupStyle: (group) => group.rule === 'bySource' ? { color: '#6b7280' } : undefined

groupStyle: (group, base) => ({ tiers: [...(base.tiers ?? []), { width: 140, height: 44, style: { html: () => chip(group) } }] })

interactionEnabled

interactionEnabled: boolean

定義: interfaces/RendererOptions.ts:315

デフォルト

true

markerStyleMap?

optional markerStyleMap: MarkerStyleMap

定義: interfaces/RendererOptions.ts:135

グラフで使用されるマーカー形状のカスタムスタイルを定義します。

各キーはマーカータイプ (例: 'diamond'、'arrow') であり、MarkerStyle オブジェクトにマップされます。

デフォルト値

defaultMarkerStyleMap

例

markerStyleMap: {
  'diamond': {
    fill: '#44c77f',
  },
}

maxZoom

maxZoom: number

定義: interfaces/RendererOptions.ts:299

デフォルト

minFitScale?

optional minFitScale: number

定義: interfaces/RendererOptions.ts:305

近似がズームアウトされる最小スケール。それほど必要のないコンテンツはここに表示されます fitAnchor を中心としたスケールで、キャンバスの端を越えます。設定を解除してフィット常にすべてを示します。 fitAndCenter に明示的に渡されたスケールは無視されます。

minLabelFontSize?

optional minLabelFontSize: number

定義: interfaces/RendererOptions.ts:284

レンダリングされるフォントサイズ (CSS ピクセル単位)。これを下回るとラベルは描画されません。

A label rides the graph and scales with it, so past a certain zoom it is text nobody ズームアウトして開くのに十分な大きさのグラフで、すべてのラベルを一度に読み取ることができます。以下このサイズでは、ライブラリはそれらをまったく描画しないため、それらはパスから除外されます。シミュレーションティックごとにラベルの位置を変更します。

キャンバス全体に対する 1 つの番号: エッジのラベルとノードのラベルは同様です。違い between them falls out of the font size already, since a node's label is derived from its size — a big node keeps its label longer than a small one.

0 は、ズームごとにすべてのラベルを描画します。

デフォルト

minZoom

minZoom: number

定義: interfaces/RendererOptions.ts:297

デフォルト

0.05

nodeStyleMap?

optional nodeStyleMap: Record<string, Partial<NodeStyle>>

定義: interfaces/RendererOptions.ts:190

ノードタイプをそのスタイルにマップします。

各キーはノードタイプ (nodeTypeAccessor によって返される) であり、NodeStyle オブジェクトにマップされます。

備考

nodeTypeAccessor と組み合わせて使用されます

例

nodeStyleMap: {
  'hub': { shape: 'hexagon', color: '#aaa', size: 30 },
  'spoke': { shape: 'triangle', color: '#f00' },
}

nodeTypeAccessor()?

optional nodeTypeAccessor: (node) => string | undefined

定義: interfaces/RendererOptions.ts:148

ノードのタイプにアクセスする関数。で使用されます

タイプに基づいてノードのスタイルを設定するために使用されます。

パラメータ

node

Node

返品

string | undefined

備考

nodeStyleMap と組み合わせて使用されます

例

nodeTypeAccessor: (node) => node.getData()?.type

renderCluster()?

optional renderCluster: (cluster) => string | void | HTMLElement

定義: interfaces/RendererOptions.ts:104

クラスター用のカスタムレンダラー。

クラスターの表示方法を完全に制御できますこの関数は次のいずれかを返すことができます。

クラスターとして使用される HTMLElement、または
クラスター内でレンダリングする文字列

パラメータ

cluster

Node

返品

string | void | HTMLElement

例

renderCluster: (cluster: Node): HTMLElement | string | void => {
  const size = 12;
  const style = [
    'display:block',
    `width:${size}px`,
    `height:${size}px`,
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  return `<span style="${style}"></span>`;
}

renderLabel()?

optional renderLabel: (edge) => string | void | HTMLElement

定義: interfaces/RendererOptions.ts:77

エッジラベルのカスタムレンダラー。

エッジラベルの表示方法を完全に制御できます。この関数は次のいずれかを返すことができます。

エッジのラベルとして使用される HTMLElement、または
ラベル内にレンダリングする文字列

パラメータ

edge

Edge

返品

string | void | HTMLElement

例

renderLabel: (edge: Edge): HTMLElement | string | void => {
  const style = [
    'display:inline-block',
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  const text = edge.getData().label;
  return `<span style="${style}">${text}</span>`;
}

renderNode()?

optional renderNode: (node) => string | void | HTMLElement

定義: interfaces/RendererOptions.ts:52

ノードのカスタムレンダラー。

ノードの表示方法を完全に制御できますこの関数は次のいずれかを返すことができます。

ノードとして使用される HTMLElement、
ノード内でレンダリングする文字列、または
何もせず、そのノードを通常のスタイリングパイプラインに任せます。

ここに返されたカード ** は** ノードです。形状、アイコン、絵、ラベルは描画されていません。その背後にあり、その測定されたサイズによって衝突半径とエッジアンカーが決まります。ノードに対して何も返さないと、その代わりにその nodeStyleMap エントリ、形状、および通常どおりラベルを付けます。これにより、すべてのノードではなく、いくつかのノードがカード化されます。

スタイリングチェーンの残りの部分を構成するカードの場合、次のように宣言します。 NodeStyle.html の代わりに shape: 'none' を使用します。タイプごとまたはごとに解決されますノード。これはグローバルです。

パラメータ

node

Node

返品

string | void | HTMLElement

例

renderNode: (node: Node): HTMLElement | string | void => {
  const size = 12;
  const style = [
    'display:block',
    `width:${size}px`,
    `height:${size}px`,
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  return `<span style="${style}"></span>`;
}

selectionBox

selectionBox: SelectionBox

定義: interfaces/RendererOptions.ts:316

type

type: RendererType

定義: interfaces/RendererOptions.ts:15

グラフで使用されるレンダリング方法を定義します。

zoomAnimation

zoomAnimation: boolean

定義: interfaces/RendererOptions.ts:293

デフォルト

true

zoomAnimationDuration

zoomAnimationDuration: number

定義: interfaces/RendererOptions.ts:295

デフォルト

zoomEnabled

zoomEnabled: boolean

定義: interfaces/RendererOptions.ts:291

デフォルト

true

インターフェース: GraphRendererOptions ​

プロパティ ​

beforeRender() ​

パラメータ ​

graph ​

返品 ​

defaultEdgeStyle ​

デフォルト値 ​

defaultLabelStyle ​

デフォルト値 ​

defaultNodeStyle ​

デフォルト値 ​

detailTransition? ​

デフォルト ​

dragEnabled ​

デフォルト ​

edgeStyleMap? ​

備考 ​

例 ​

edgeTypeAccessor()? ​

パラメータ ​

edge ​

返品 ​

備考 ​

例 ​

enableFocusMode ​

デフォルト ​

enableNodeExpansion ​

デフォルト ​

fitAnchor? ​

focusTierTrigger? ​

デフォルト ​

groupOutline()? ​

パラメータ ​

group ​

返品 ​

groupStyle()? ​

パラメータ ​

group ​

base ​

返品 ​

例 ​

interactionEnabled ​

デフォルト ​

markerStyleMap? ​

デフォルト値 ​

例 ​

maxZoom ​

デフォルト ​

minFitScale? ​

minLabelFontSize? ​

デフォルト ​

minZoom ​

デフォルト ​

nodeStyleMap? ​

備考 ​

例 ​

nodeTypeAccessor()? ​

パラメータ ​

node ​

返品 ​

備考 ​

例 ​

renderCluster()? ​

パラメータ ​

cluster ​

返品 ​

例 ​

renderLabel()? ​

パラメータ ​

edge ​

返品 ​

例 ​

renderNode()? ​

パラメータ ​

node ​

返品 ​

例 ​

selectionBox ​

type ​

インターフェース: GraphRendererOptions

プロパティ

beforeRender()

パラメータ

graph

返品

defaultEdgeStyle

デフォルト値

defaultLabelStyle

デフォルト値

defaultNodeStyle

デフォルト値

detailTransition?

デフォルト

dragEnabled

デフォルト

edgeStyleMap?

備考

例

edgeTypeAccessor()?

パラメータ

edge

返品

備考

例

enableFocusMode

デフォルト

enableNodeExpansion

デフォルト

fitAnchor?

focusTierTrigger?

デフォルト

groupOutline()?

パラメータ

group

返品

groupStyle()?

パラメータ

group

base

返品

例

interactionEnabled

デフォルト

markerStyleMap?

デフォルト値

例

maxZoom

デフォルト

minFitScale?

minLabelFontSize?

デフォルト

minZoom

デフォルト

nodeStyleMap?

備考

例

nodeTypeAccessor()?

パラメータ

node

返品

備考

例

renderCluster()?

パラメータ

cluster

返品

例

renderLabel()?

パラメータ

edge

返品

例

renderNode()?

パラメータ

node

返品

例

selectionBox

type