インターフェース: NodeStyle

プロパティ

badges?

optional badges: (node) => NodeBadge[] | NodeBadge[]

Small indicators pinned to the node's rim, independent of every other channel — NodeBadgeを参照してください。

Resolved like any other channel: the narrowest declaration wins outright rather than merging, so a node's own badges replaces whatever nodeStyleMap or defaultNodeStyleがあげました。 An empty array is the way to say "this one wears none"; undefined はバッジグループをまったくレンダリングしません。

Four fit on a plain node, two on one with children (the expand affordance reserves the 東の角）。 Anything beyond that collapses into a +n badge naming the rest.

color

color: string | (node) => string

定義: interfaces/RendererOptions.ts:478

ノードのメインカラー

デフォルト

'var(--pvt-node-color, #007acc)'

focusTier?

optional focusTier: Clearable<Omit<Partial<NodeStyle>, "tiers" | "focusTier" | "focusTierYieldsAt" | "layoutSize" | "styleCb">>

定義: interfaces/RendererOptions.ts:615

The drawing used while this node is hovered, or selected on its own — whatever the ズーム。 This is where a node says everything about itself.

It merges over the resolved base style rather than over the active tier, so a chip tier's shape or html cannot leak into it, and it holds a constant size on screen グラフがどこまでズームアウトされても。ノードのジオメトリを変更することはありません: エッジは維持されます landing on the tier underneath and nothing moves.

発動するタイミングは GraphRendererOptions.focusTierTrigger で指定します。

focusTierYieldsAt?

optional focusTierYieldsAt: number

定義: interfaces/RendererOptions.ts:630

The index into tiers from which focusTier stops firing.ノードが is drawn at that tier or a richer one, hover and a lone selection leave it as it is, for a focus drawing that the zoom tier already shows.設定を解除すると、フォーカス描画が開始されますすべての層で。 tiers のないノードでは無視されます。

例

// Hovering the dot shows the chip; once the chip tier is drawn, hovering adds nothing.
tiers: [{ width: 140, height: 44, style: { shape: 'none', html: chipFor } }],
focusTier: { shape: 'none', html: chipFor },
focusTierYieldsAt: 0,

fontFamily

fontFamily: string

定義: interfaces/RendererOptions.ts:486

デフォルト

'var(--pvt-font-family)'

html()?

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

定義: interfaces/RendererOptions.ts:572

ノード内で SVGForeignObject 要素として使用する HTML。

Resolved like every other channel, so a card can be declared at any level — nodeStyleMap[type].html gives one kind of node a card while the rest keep their shapes, and a single node's own style overrides that.何も返さないと描画されません card, so one callback can card some nodes and leave the others alone.

Pair it with shape: 'none' for a card that is the node.それ以外の場合、形状は次のようになります。 size はノードの最小値です。

The card is measured and the node grows to it, so it is never clipped and edges land その境界線上にある。 You do not have to make the returned element self-sizing — it is measured inside a shrink-to-fit box, so width: 100% resolves against its own プレースホルダーに対してではなく、コンテンツに対して。

信頼できる HTML のみを返してください。 返された内容はそのまま挿入されます。ノードのデータをマークアップ文字列に直接埋め込まず、textContent を使って組み立てるか、エスケープしてください。

パラメータ

node

Node

返品

string | void | HTMLElement

iconClass?

optional iconClass: string

定義: interfaces/RendererOptions.ts:530

iconUnicode?

optional iconUnicode: string

定義: interfaces/RendererOptions.ts:531

imageFit?

optional imageFit: (node) => ImageFit | ImageFit

定義: interfaces/RendererOptions.ts:548

imagePath 画像がノードの形状にどのように配置されるか。ノードごとに解決できるため、 different nodes can mix modes (e.g. screenshots 'cover', other attachments 'icon').

デフォルト

'icon'

imagePath?

optional imagePath: string

定義: interfaces/RendererOptions.ts:542

ノードに描画する画像の URL。 http:、https:、data:、および blob: スキーム;それ以外は無視されます。レンダリングすると URL が取得されます。

layoutSize?

optional layoutSize: number

定義: interfaces/RendererOptions.ts:641

このノードがレイアウト内でそれ自体のために予約するボックスの半分の幅 (グラフ単位)。 This is the only size the simulation ever sees: set it and the drawing no longer drives the collision radius, so a node can change how it is drawn without moving anything.

未指定の場合は、従来どおり描画内容に応じて間隔が決まります。図形では size、HTML カードでは測定したサイズを使います。

デフォルト

宣言された階層のうち最大の width の半分。階層がない場合は未指定。

shape

shape: (node) => NodeShape | NodeShape

定義: interfaces/RendererOptions.ts:473

ノードの形状。標準形状またはカスタム SVG パスのいずれか

デフォルト

circle

size

size: number | (node) => number

定義: interfaces/RendererOptions.ts:480

デフォルト

strokeColor

strokeColor: string | (node) => string

定義: interfaces/RendererOptions.ts:482

デフォルト

'var(--pvt-node-stroke, #fff)'

strokeWidth

strokeWidth: string | number

定義: interfaces/RendererOptions.ts:484

デフォルト

'var(--pvt-node-stroke-width, 2)'

styleCb()?

optional styleCb: (node) => Partial<NodeStyle>

定義: interfaces/RendererOptions.ts:653

ノードに基づいてスタイルプロパティを動的にオーバーライドするコールバック。

それがどこに配置されるかは、どのスタイルブロックがそれを宣言するかによって異なります。 ノード自身の上このスタイルでは完全に勝ち、nodeStyleMap は完全にスキップされます。オン render.defaultNodeStyle これはデフォルトのスロットの計算された形式です。 only what neither the node nor nodeStyleMap set (and what a per-node styleCb 省略）、その結果は依然として両方に負けます。

レンダリングごとにノードごとに 1 回実行されるため、コストを抑えます。

パラメータ

node

Node

返品

Partial<NodeStyle>

svgIcon?

optional svgIcon: string

定義: interfaces/RendererOptions.ts:537

ノード内に描画されるインライン SVG マークアップ。 DOM に到達する前にサニタイズされる (スクリプトイベントハンドラーは削除されます)、ただしその内部のリモート <image href> は引き続きフェッチされます when the node renders — see the security guide.

text?

optional text: string | (node) => string

定義: interfaces/RendererOptions.ts:552

ノード内で SVGText 要素として使用するテキスト。

textAnchorPosition

textAnchorPosition: "end" | "start" | "middle"

定義: interfaces/RendererOptions.ts:490

デフォルト

'middle'

textColor

textColor: string | (node) => string

定義: interfaces/RendererOptions.ts:488

デフォルト

'var(--pvt-node-text-color, #fff)'

textFontSize?

optional textFontSize: number | (node) => number

定義: interfaces/RendererOptions.ts:529

ノードのラベルのフォントサイズ (グラフ単位) (ズーム 1 で CSS ピクセル)。レーベルのオフセット、その組み込みの文字バジェット、およびズームゲートはすべてこれに従います。

デフォルト

undefined — derived from the node's size: max(12, size × 0.45)

textHorizontalShift

textHorizontalShift: number | (node) => number

定義: interfaces/RendererOptions.ts:497

ノードのラベル位置に適用される水平方向のシフト。値 0 はノードの中心にあることを意味し、値 1 はノードの東にあり、値 -1 はノードの西にあります。 Other values are also accepted, e.g., 0.5 would be halfway between the center and the east of the node.

デフォルト

textMaxWidth?

optional textMaxWidth: number | (node) => number

定義: interfaces/RendererOptions.ts:523

グラフ単位で描画できるノードラベルの最大幅 (ズーム 1 で CSS ピクセル)。長いラベル中央の省略記号を使用して短縮されます。サイズ設定された組み込みの予算を置き換えます。ノードに。 textTruncateがfalseの場合は無視されます。

デフォルト

undefined — the built-in budget

textRotateDegree

textRotateDegree: number | (node) => number

定義: interfaces/RendererOptions.ts:510

ノードのラベルに適用される回転度。正の値は時計回りに回転し、負の値は反時計回りに回転します。

デフォルト

textTruncate

textTruncate: boolean | (node) => boolean

定義: interfaces/RendererOptions.ts:516

幅が広すぎるラベルは中央の省略記号 (head…tail) で短くします。 false が描きます完全に、ノードを超えてこぼれるテーマの錠剤についてです。

デフォルト

true

textVerticalShift

textVerticalShift: number | (node) => number

定義: interfaces/RendererOptions.ts:504

ノードのラベル位置に適用される垂直シフト。値 0 はノードの中心にあることを意味し、値 1 はノードの北、-1 はノードの南を意味します。他の値も受け入れられます。たとえば、0.5 はノードの中心と北の中間になります。

デフォルト

tiers?

optional tiers: NodeTier[]

定義: interfaces/RendererOptions.ts:603

現在レンダリングされているサイズによって選択される、このノードの代替描画 — グリフ概要、スペースがあればラベル付きチップ、スペースがあればカードそのために。最小のものを最初に注文します。最も豊かなものが勝ち、基本的なスタイルは誰もやらないときはフロア。

ノードのフットプリントは図面によって決して変更されません (layoutSize を参照)。層を交換しても何も変わりません。

例

tiers: [
  { width: 32, height: 32, style: { shape: 'circle', size: 16 } },
  { width: 140, height: 44, style: { shape: 'none', html: chipFor } },
]

インターフェース: NodeStyle ​

プロパティ ​

badges? ​

color ​

デフォルト ​

focusTier? ​

focusTierYieldsAt? ​

例 ​

fontFamily ​

デフォルト ​

html()? ​

パラメータ ​

node ​

返品 ​

iconClass? ​

iconUnicode? ​

imageFit? ​

デフォルト ​

imagePath? ​

layoutSize? ​

デフォルト ​

shape ​

デフォルト ​

size ​

デフォルト ​

strokeColor ​

デフォルト ​

strokeWidth ​

デフォルト ​

styleCb()? ​

パラメータ ​

node ​

返品 ​

svgIcon? ​

text? ​

textAnchorPosition ​

デフォルト ​

textColor ​

デフォルト ​

textFontSize? ​

デフォルト ​

textHorizontalShift ​

デフォルト ​

textMaxWidth? ​

デフォルト ​

textRotateDegree ​

デフォルト ​

textTruncate ​

デフォルト ​

textVerticalShift ​

デフォルト ​

tiers? ​

例 ​

インターフェース: NodeStyle

プロパティ

badges?

color

デフォルト

focusTier?

focusTierYieldsAt?

例

fontFamily

デフォルト

html()?

パラメータ

node

返品

iconClass?

iconUnicode?

imageFit?

デフォルト

imagePath?

layoutSize?

デフォルト

shape

デフォルト

size

デフォルト

strokeColor

デフォルト

strokeWidth

デフォルト

styleCb()?

パラメータ

node

返品

svgIcon?

text?

textAnchorPosition

デフォルト

textColor

デフォルト

textFontSize?

デフォルト

textHorizontalShift

デフォルト

textMaxWidth?

デフォルト

textRotateDegree

デフォルト

textTruncate

デフォルト

textVerticalShift

デフォルト

tiers?

例