レンダリングオプション

Pivotick では、render オプションを使用してノード、エッジ、ラベルのレンダリング方法をカスタマイズできます。

警告

ここで定義されたすべてのスタイルは、render.type が svg に設定されている場合にのみ適用されます。

オプション	種類	デフォルト	説明
type	'svg' | 'canvas'	'svg'	レンダリング方法。 'svg' は SVG 要素を使用し、'canvas' は HTML キャンバスを使用します (実験的 - 完全には実装されていません)。
renderNode	(node: Node) => HTMLElement | string | void	undefined	ノードのカスタム レンダラー。
renderLabel	(edge: Edge) => HTMLElement | string | void	undefined	エッジラベルのカスタムレンダラー。
defaultNodeStyle	NodeStyle	defaultNodeStyle	すべてのノードに適用されるデフォルトのスタイル。
defaultEdgeStyle	EdgeStyle	defaultEdgeStyle	すべてのエッジに適用されるデフォルトのスタイル。
defaultLabelStyle	LabelStyle	defaultLabelStyle	すべてのエッジ ラベルに適用されるデフォルトのスタイル。
markerStyleMap	Record<string, MarkerStyle>	defaultMarkerStyle	エッジ マーカーのカスタム スタイル ('arrow'、'diamond' など)。 MarkerStyleを参照
nodeTypeAccessor	(node: Node) => string | undefined	undefined	ノードのタイプにアクセスする関数。nodeStyleMap とともに使用されます。
nodeStyleMap	Record<string, NodeStyle>	{}	ノード タイプ (nodeTypeAccessor から) をスタイルにマップします。
edgeTypeAccessor	(edge: Edge) => string | undefined	undefined	エッジの 種類 は、edgeStyleMap とともに、レイヤー キーとして使用されます。
edgeStyleMap	Record<string, Partial<EdgeStyle>>	undefined	エッジの種類 (edgeTypeAccessor から) をスタイルにマッピングします。 エッジレイヤーを参照してください。
minZoom	number	0.1	最小ズームレベル。
maxZoom	number	10	最大ズームレベル。
minFitScale	number	undefined	フィットが行う最低のズーム。このズームでは、大きすぎて収まらないグラフが fitAnchor を中心に開き、ミニマップに残りが表示されます。
fitAnchor	string	undefined	minFitScale で保持されるフィットが中心となるノードの ID。ビューはグラフの端で停止するため、一方の側のアンカーはその側の近くに留まります。
zoomEnabled	boolean	true	ズームを有効にします。 false はビューポート レールのズーム ボタンも使用し、フィットとセンターを維持します。
selectionBox	SelectionBox	undefined	領域の選択: enabled: false はドラッグ マーキー ** をドロップし、** は選択 ▸ なげなわツールをドロップします。
enableNodeExpansion	boolean	true	クラスターの展開: false は、山形、Enter ショートカット、および破線の折りたたまれたアウトラインを持ちます。選択された子は、閉じたクラスターを点灯したままになります。

レンダリングの種類

ヒント

Pivotick を使用すると、単純なデフォルトから完全なカスタム レンダリングまで、レンダリングを柔軟に制御できます。 簡単な概要は次のとおりです。

• renderNode と renderLabel を使用すると、ノードとラベルの描画方法を完全にカスタマイズできます (HTML またはテキストを返すことができます)。
• defaultNodeStyle.html (ノードごとまたはタイプごと) は、スタイリング チェーン内の同じエスケープ ハッチです — HTML ノード を参照してください。
• nodeTypeAccessor + nodeStyleMap を使用すると、各要素のタイプに基づいて動的なスタイルを設定できます。
• defaultNodeStyle、defaultEdgeStyle、defaultLabelStyle は、すべての要素の基本的な外観を定義します。
• edgeTypeAccessor + edgeStyleMap はエッジに対応し、次の 2 倍になります。 リレーションレイヤーをオフにするキー — エッジレイヤーを参照してください。

カードの形状が何であれ、測定されます

Pivotick は、<foreignObject> のサイズに戻し、力を加えるために戻すものを測定します レイアウトの衝突半径。カードは、シュリンクトゥフィットボックス内で測定されます。 ライブラリ独自のものなので、ルートの自己サイズ設定を **** にする必要はありません: width: 100% プレースホルダーに対してではなく、それ自体のコンテンツに対して解決されます。

次の 3 つのレンダリング例では、次のデータを使用しています。

const data = {
    nodes: [
        { id: 1, data: { label: 'A', type: 'hub' } },
        { id: 2, data: { label: 'B', type: 'spoke' } }
    ],
    edges: [{ from: 1, to: 2 }]
}

デフォルトのレンダリング

const options = {
    render: {
        defaultNodeStyle: {
            shape: 'circle',
            color: '#007acc',
            size: 12,
            strokeColor: '#fff',
            strokeWidth: 2,
            fontFamily: 'system-ui',
            textColor: '#fff'
        },
        defaultEdgeStyle: {
            markerStart: (edge: Edge) => edge.getData().mstart,
            markerEnd: 'arrow',
            curveStyle: 'straight',
        },
    }
}

Map-Accessor レンダリング

const options = {
    render: {
        nodeTypeAccessor: (node) => node.getData()?.type,
        nodeStyleMap: {
            'hub': {
                shape: 'hexagon',
                color: '#f90',
                size: 25,
                text: (node) => node.getData()?.label
            },
            'spoke': {
                shape: 'triangle',
                color: '#09f'
            }
        },
    },
    UI: {
        mode: 'static'
    }
}

カスタムコールバックレンダリング

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

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

Map-Accessor レンダリングの例

HTML ノード

shape、color、icon、text の組み合わせがうまくいかない場合は、レンダラーにいくつかの値を渡します マークアップ。 2 つの方法があり、違いは どこで宣言されるか だけです。

	宣言日	届く
NodeStyle.html	defaultNodeStyle、nodeStyleMap[type]、ノード独自のスタイル、styleCb リターン	1 つのタイプ、または 1 つのノード
render.renderNode	レンダラオプション	スタイリング チェーンの前のすべてのノード

html は最初に到達するものです。これは通常のスタイルのチャンネルなので、解決されます。 color または shape と同じ優先順位チェーンを介して、カードはいずれか 1 つに与えることができます。 残りは形状を維持しながら、ノードの一種です。

const options = {
    render: {
        nodeTypeAccessor: (node) => node.getData()?.kind,
        nodeStyleMap: {
            // A card, and nothing else: `shape: 'none'` is what makes it the whole node.
            service: {
                shape: 'none',
                html: (node) => {
                    const card = document.createElement('div')
                    card.className = 'my-service-card'
                    card.textContent = node.getData()?.name
                    return card
                },
            },
            // Same graph, ordinary shapes.
            host: { shape: 'circle', size: 18, color: '#0891b2' },
        },
    },
}

shape: 'none'

これがなければ、形状は まだカードの後ろに描かれています となり、size が最小になります。 ノードは許可されています。これは、カラーディスク上にあるカードに必要なことです。 ノードであるカードに望むものではありません。 shape: 'none' 形を描かず、手 代わりに、ノードの衝突半径とエッジがカードに固定されます。

これは他のものと同様の形状値であるため、次のように構成されます。 ラベルのみのノードは次のようになります。 shape: 'none' は text でカードなし、アイコンのみのノードは shape: 'none' でカードなし iconClass。コンテンツがまったくない形のないノードは目に見えませんが、それでも存在します。 引き続きドラッグ可能で、2 × size 上で選択可能です。

カードの機能は ではありません

text は別のチャネルであるため、カードとノード ラベルが一緒に描画されます。あなたのカードなら 独自のタイトル、セット text: '' が付いています — 継承された値は、次のコマンドでクリアできません。 undefined、これはスタイル マップの内容に当てはまります。

サイズ設定

カードが測定され、それに合わせてノードが成長するため、カードがクリップされたり、衝突したりすることはありません。 実際のカードを強制的に間隔をあけ、エッジが円ではなくカードの境界線に着地するようにします。 その周り。これを機能させるために何もする必要はありません。width: 100% を返すだけです。 測定は収縮してフィットするボックス内で行われるため、root は問題ありません。

知っておく価値のある 2 つの結果:

• 測定は 非同期 (カードは画面に表示されるまで測定できません)、 そのため、最初のフレームまたは 2 フレームではノードの半径が size に設定され、その後は カードの。それが着地すると、レイアウトが 1 回微調整されます。
• カードはレンダリング時で一度測定されます。後でそのコンテンツのサイズが自動的に変更される場合、 ノードを再レンダリングして再測定します。

一部のノードのみをカード化する

どちらのコールバックもノードに対して 何も を返し、そのノードを スタイリング チェーン - いつものように、形状、スタイルマップ エントリ、アイコン、ラベル。したがって、単一のグローバル renderNode は、1 に値するノードをカード化できます。

renderNode: (node) => node.getData()?.featured ? buildCard(node) : undefined

信頼できるマークアップのみ

返されたものはそのまま挿入されます。 textContent で構築するか、エスケープしてください。しないでください。 ノード データをマークアップ文字列に補間します。 セキュリティガイドを参照してください。

完全なノードラベル

ルームよりも長いノード ラベルは、中央の省略記号で短縮されます。 (Supe…abel)。代わりに完全に描画するには textTruncate: false を設定します — デフォルトとして、 ノードタイプごと、またはノードごと:

const options = {
    render: {
        defaultNodeStyle: { textTruncate: false },
    },
}

2 つのうち、textMaxWidth は、グラフ単位で選択した幅でラベルをキャップします。 (ズーム 1 で CSS ピクセル)、ノードが与える部屋の代わりに。ぴったりのラベルが描かれます 完全に、長いものは中央の省略記号でその幅に短縮されます。

const options = {
    render: {
        defaultNodeStyle: { textTruncate: true, textMaxWidth: 160 },
    },
}

ラベルのフォントサイズ

ノード ラベルはデフォルトでは max(12, size × 0.45) に描画されるため、ノードとともに拡大します。 ノードが、画像などの重要性の程度ではなく、描画内容に対して大きい場合 サムネイル、ラベルを隣接するラベルと一致するように textFontSize (グラフ単位) を設定します。

const options = {
    render: {
        nodeStyleMap: {
            image: { size: 80, imagePath: (node) => node.getData()?.url, textFontSize: 12 },
        },
    },
}

ラベルはまだノードのすぐ近くにあり、組み込みバジェットは依然としてその幅を ノード (フォントが小さいほど多くの文字が収まる)、 ズームゲートは設定したサイズで判断します。

キャップはノードの残りの部分と同様にズームに合わせて拡大縮小され、 ノード。 textTruncateがfalseの場合は無視されます。

通常、ラベル全体またはキャップ付きのラベルはノードの形状を超えてはみ出すため、同じ上に描画されます。 テーマの錠剤をフローティングラベルとして表示し、キャンバス上で読みやすくします。と組み合わせてください textVerticalShift: 1 (または textHorizontalShift) でラベル全体を消去します ノードの。エッジラベルが切り詰められることはありません。

text はノード上のラベルであり、ノードの代替ではありません。 is であるノードのテキストは次のようになります。 html、renderNode、または tier — これらはノードの描画であり、ズームによってそれらが維持されます。 minLabelFontSize はラベルに適用されます。

ノードバッジ

グラフが役に立つまでに、通常は color、shape、size、iconClass になります。 みんな何かを背負っている。 badges は独自のチャンネルです - 小さなインジケーターが固定されています ノードのリムまで、他のものは何も消費しません。

const options = {
    render: {
        defaultNodeStyle: {
            badges: (node) => {
                const { notes, disputed } = node.getData()
                return [
                    notes && { text: String(notes), color: '#2563eb', title: `${notes} notes` },
                    disputed && { iconClass: 'fa fa-exclamation', color: '#b94a48', title: 'Disputed' },
                ].filter(Boolean)
            },
        },
    },
}

バッジ text (カウント、または 1 つか 2 文字)、iconClass を与えます。 iconUnicode または svgIcon、およびネイティブ ツールチップの title。 text が勝つ場合 両方を供給します。テキストが長くなるとバッジが錠剤に成長し、3 つを超えるとバッジが成長します。 レンダリングされる文字 99+。

彼らはどこへ行くのか

position を省略すると、バッジは 'ne' から時計回りに空きコーナーを埋めます。一つ挙げてください ('ne' | 'nw' | 'se' | 'sw') 重複も含めてそのまま尊重します。

プレーン ノードには 4 つが適合し、子を持つ 2 つには 1 つが適合します。 展開/折りたたみ ノードが折りたたまれている場合、コントロールは北東に位置し、ノードが折りたたまれている場合は南東に位置します。 拡張されるため、拡張可能なノードでは 両方 東の角が予約されます。それ以外の場合は、 クラスターが開いた瞬間に、すべてのバッジの角が変わります。何を超えたバッジ はめ込みは +n に折りたたまれ、ツールチップでその名前が付けられます。

バッジは床と天井の間のノードに合わせて拡大縮小されるため、バッジは常に読みやすくなります。 大きなノードの上に膨らむことなく小さなノードがあり、それらは実際の形状の上に乗っています リム — 正方形または額入りの絵の角、円の 45 度の点。

クリック数

バッジはヒットテスト可能ですが、デフォルトでは透明です。ハンドラーがない場合はクリックします。 はフォールスルーしてその下のノードを選択するため、バッジがデッドスポットになることはありません。

{ text: '3', onClick: (event, node, badge) => openNotes(node) }

バッジに onClick を付けるか、行動に対して callbacks.onBadgeClick を宣言します すべて共有します - そして、ポインタ カーソルを取得してクリックを消費し、 ノードが選択されていません。両方とも発火し、バッジ自体が先に発火します。バッジを押すとまだドラッグがかかる ノードはどちらの方向でも、対話バス上の badgeClick リスナーは、 cancel()両方。

範囲

バッジは、それらが存在するノードのみを表します。折りたたまれたクラスターは、 子の関数を集約します — 独自の badges 関数で node.children を実行します。 それがあなたが望んでいることです。事実が合計されるか、勝つか、どちらでもないのかはあなただけが知っているからです。

ズーム後の詳細

近くでよく読める絵も、全体を見ると読めません。 概要ではそれが何であるかを言うことはできません。 tiers 1 つのノードに複数の描画とピックを実行させます それらの間は、ノードが現在レンダリングしている大きさから決まります。

const options = {
    render: {
        defaultNodeStyle: {
            tiers: [
                // Small: a coloured dot.
                { width: 32, height: 32, style: { shape: 'circle', size: 16 } },
                // Once there is room for it: a labelled chip.
                { width: 140, height: 44, style: { shape: 'none', html: buildChip } },
            ],
        },
    },
}

ティアは小さい順に並べられ、適合する最もリッチなティアが勝ちとなります。どれもそうしないときは、 ノードはその基本スタイルで描画するため、すでに持っているスタイルはフロアです。 tiers はあらゆる点で影響を受けないと宣言します。

ティアが継承するもの

層は基本スタイルにマージされるため、名前のないチャネルは継承されます。図面 例外: iconUnicode、iconClass、svgIcon、imagePath、html は 1 つのスロットです。 したがって、それらのいずれかを指定する層は、ベースの図面 (およびその imageFit) を完全に置き換えます。 カード層を持つ静止状態のグリフには、カードのみが必要です。

const options = {
    render: {
        defaultNodeStyle: {
            svgIcon: buildGlyph,
            tiers: [
                { width: 140, height: 44, style: { shape: 'none', html: buildChip } },
            ],
        },
    },
}

描画に名前を付けず、size、color、text のみを指定した層は、ベースのグリフを保持します。

層によって置き換えられないチャネルを削除するには、それを null に設定します。これは、 ティアはその 1 つを引きます 全く引きません。 strokeColor: null はベースのアウトラインを削除します。 インスタンス。 undefined は代役を立てられません: 「私はこのチャンネルに名前を付けません」という意味です。 まさに、ベースの価値がどのように存続するかです。

これは、null がそのように機能する唯一のレイヤーです。スタイルチェーンの他の場所 null styleCb は null を直接返すため、依然として下の層に到達します。 ノード データの形状は通常の形状であり、常に「デフォルトを使用する」ことを意味します。

ノードをシェイプレスにするには、shape をクリアするのではなく、shape: 'none' を使用します。

階層を決めるもの

レンダリング サイズ: CSS ピクセル単位のノードのフットプリント、つまり footprint × zoom です。あ ティアは minRenderedSize に達するとエンゲージします。これはデフォルトでティア独自の値になります。 width なので、{ width: 140 } は「140 ピクセルを描画する余地ができたらエンゲージする」となります。 ノード」。

ズームスケールだけでは機能しません。レイアウトを考えたコーディネートを掛け合わせるので、 同じスケールは、異なるグラフでは見かけのサイズが異なることを意味し、しきい値が調整されます あるデータセットでは間違っている可能性があり、次のデータセットでは間違っている可能性があります。

関与した層は、レンダリングされるサイズがしきい値の 85% に低下するまで保持されます。毎 ノードはしきい値を共有するため、そのバンドがないと、ノード上にパークされたキャンバスがちらつきます。 全体。

足跡はそのまま残ります

ノードがレイアウト内で予約するボックスは、その描画時に変更されません。それは layoutSize、デフォルトでは宣言された最も広い層の半分であるため、層を宣言すると次のようになります。 グラフは 2 番目の数字なしで適切な間隔で表示されます。層が切り替わっても何も動きません。 すでに適切なサイズだったボックス内で描画が変更され、軍隊はそのボックスを決して認識しません。 違い。

width と height は、同じ理由で、測定されるのではなく宣言されます。レイアウトには、 最初のティックの前にフットプリントを知るため、測定されたカードはそのサイズを 1 回だけ報告します それは描かれています。

layoutSize を自分で設定して、グラフの間隔を最も広い層より狭く、または広くします。注記 層の幅が設置面積と等しい場合にのみ、層が設計サイズで描画されること。ある 幅の狭いものは比例的に早く係合し、比例して小さく描画されます。それを与えてください それが重要な場合は、明示的に minRenderedSize ください。

フォーカス描画

focusTier は、ノードがホバーされている間、またはノード自体が選択されているときに使用する描画です。 ズームは何でも。ここはノードがそれ自体についてすべてを語る場所なので、ノードを読み取ることは決してありません ズームすることを意味します。

const options = {
    render: {
        defaultNodeStyle: {
            tiers: [/* … */],
            focusTier: { shape: 'none', html: buildDetailCard },
        },
    },
}

アクティブ層ではなく、ノードの base スタイルでマージされるため、チップ層の shape または html がそこに漏れることはありません。画面上で一定のサイズを保持します。描画は次のようになります。 ズームに対してカウンタースケールが設定されるため、280×150 のカードは、どんなに離れていても 280×150 CSS ピクセルになります。 グラフはそうです。また、ノードのジオメトリには決して触れないため、エッジは層に到達し続けます。 下にいてホバリングしても何も動きません。

フォーカス描画は、ノードの バッジ を独自のリムに同時に着用します。 画面上のサイズはカードと同じです。ノード自体のバッジは表示中は非表示になるため、何も描画されません 2回。カード上に別のセットを表示するには、focusTier に独自の badges を与えます。

それ自体で選択されたノードのみが昇格されます。 50 ノードのボックスを選択すると壁になります 重なったカードのこと。

render.focusTierTrigger は、起動時に次のように通知します: 'both' (デフォルト)、'hover'、 'selection' または 'off'。スタイル プリセットを埋め込む場合は、'off' に手を伸ばしてください それ以外の場合は、出荷時にフォーカス描画を編集せずに抑制したい場合があります。

層にすでに表示されている場合

場合によっては、フォーカス描画がズーム層の 1 つと同じになることがあります。 チップ上にカーソルを移動すると、グラフが十分にズームインされるとチップも描画されます。そこで、 ホバリングすると、すでに画面上にあるチップの上に 2 番目の小さなチップが描画されます。 focusTierYieldsAt はインデックスに tiers という名前を付け、そこからフォーカス描画の起動が停止します。

defaultNodeStyle: {
    tiers: [{ width: 140, height: 44, style: { shape: 'none', html: chipFor } }],
    focusTier: { shape: 'none', html: chipFor },
    focusTierYieldsAt: 0,
}

ノードがその層またはより豊富な層で描画されている間、ホバーして単独で選択すると、ノードはそのままになります。 それはそうです。ズーム レベルではなく、アクティブな層に従います。そのため、 交換する。カードを開いた状態でズームインすると、層がフェードインするにつれてカードがフェードアウトし、再度ズームアウトすると、 ポインタを動かさずに元に戻します。フォーカス図面に次のように表示されているノードでは未設定のままにしておきます。 tiers のないノードはそれを無視します。

ツールチップが引き続き表示される

フォーカス カードはツールチップの代わりにはなりません。この 2 つは独立しており、ツールチップは カードにないものを運ぶ。

スワップ自体

ノードは、ある図面から次の図面にカットするのではなく、クロスフェードします。発信 描画は独自のレイヤー上に保持され、2 つのレイヤーは互いにフェードアウトするため、ノードは決して存在しません。 ミッドスワップはなく、オーバーラップする部分が一時的に柔らかくなるだけです。

render.detailTransition は、それにかかる時間をミリ秒単位で表します。デフォルトは 160 で、 ズームが決定するすべての描画 (階層交差、フォーカス描画、ラベル) をカバーします。 交差点minLabelFontSize。 0 に設定すると、描画を一度に置き換えることができます。 フレーム:

const options = {
    render: {
        detailTransition: 0,
        defaultNodeStyle: { tiers: [/* … */] },
    },
}

画面上のすべてのノードが同時に交差するため、フェードの数だけ交差が始まります。 変更されているノードがあります。それぞれ 140×44 のカードを保持する 210 個のノードで測定したフェード実行 全長で60fps。かかる時間は、単一フレームの交差で約 26 ミリ秒です。 すでに支出しており、その数字は期間が経過しても増加しません。グラフ上でオフにする トランジションよりもフレームが重要な場合。

prefers-reduced-motion は、オプションの内容に関係なく、自動的にオフになります。

読みやすいサイズのラベル

ラベルはグラフに乗ってグラフに合わせて拡大縮小されるため、ビューが外側になるほど小さくなります。 塗装した。グラフは、フィットが選択するスケールで開き、そのスケールはグラフに応じて下がります。 成長: 数百ノードを超えると、開始フレームは誰も読めないテキストになり、上に描画されます。 グラフに名前を付けています。

render.minLabelFontSize はレンダリングされるサイズ (CSS ピクセル単位) であり、これを下回るとラベルは表示されません。 描かれた。デフォルトは 9 です。

const options = {
    render: {
        minLabelFontSize: 9,
    },
}

テストは fontSize × zoom で、ズーム スケールではなくレンダリングされたピクセルで表されます。 考案されたレイアウトの座標を乗算するため、同じ値でも見かけのサイズが異なることを意味します 次のデータセットで。

これは、キャンバス全体、エッジ ラベル、ノード ラベル同様に 1 つの数値です。違い それらの間はすでにフォント サイズ内にあります。エッジ ラベルは次の位置に描画されます。 defaultLabelStyle.fontSize (デフォルトでは 12)、ノードはノードから派生しますが、 max(12, size × 0.45) したがって、大きなノードは、小さなノードよりもラベルを低いズームに保ちます。 ノード スタイルの textFontSize は、その派生サイズを置き換えます。

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

ラベルとして重要なもの

ライブラリが配置するテキスト: エッジの label、ノードの text など render.renderLabel が戻ります。ノードの html、renderNode、または層カードはその ドロー です。 tiers は描画の選択です。

表示されているラベルは、レンダリングされるサイズがしきい値の 85% に下がるまで保持されます。 ライン上に駐車したビューはちらつきではなく安定します。同じサイズで描かれたすべてのラベルが答えを出します どの要素に属していても一緒に。

単独 で選択されたエッジには、ズームに関係なく、カウンタースケールされたラベルが表示されます。 隠されていた 2 ピクセルではなく、読み取れるようになります。エッジにはツールチップやパネルがないため、 「これは何ですか？」という答えはラベルだけです。ノードにはそのどれも必要ありません。 ツールチップ、サイドバー、および focusTier 描画を通じてすでに答えが得られます。

非表示のラベルは単に見えないだけではなく、グラフに表示されないため、コストが発生します。 ラベルはシミュレーション ティックごとに、およびパスアロン コストの大きなグラフ上で再配置されます。 フレームを超えています。ゲート後に残るのは安いストロークです。

できないこと

しきい値を超えると、ラベルが互いに重なる可能性があります。通常、エッジラベルは幅が広くなります その比率は、ズームによって変化しません。このオプションについては、 整理整頓ではなく、読みやすさ。

API

Pivotick は、レンダリング エンジンと直接対話できるレンダラー コントローラーを公開します。 すべての方法は オンラインで利用可能

フィットしてズーム

Fit and center

graph.renderer.fitAndCenter()

Zomm in / out

graph.renderer.zoomIn()
graph.renderer.zoomOut()