構成オプション

メインPivotickオプション

Pivotick は、動作、レイアウト、レンダリング、シミュレーション、UI、およびインタラクションをカスタマイズするための幅広いオプションをサポートしています。

オプション	種類	デフォルト	説明
`isDirected`	`boolean`	`true`	true の場合、エッジは指示どおりに処理されます。
`callbacks`	`InterractionCallbacks`	`{}`	ユーザー操作 (クリック、ホバー、ドラッグなど) のためのオプションのコールバック。
`layout`	`LayoutOptions`	`{}`	グラフのレイアウトの設定 (力、ツリー、間隔、配置)。
`render`	`GraphRendererOptions`	`{}`	ノード/エッジの外観などのレンダリングオプションをカスタマイズする
`simulation`	`SimulationOptions`	`{}`	物理シミュレーション (力、反復など) を制御するオプション。
`UI`	`GraphUI`	`{}`	サイドバー、選択、ツールヒント、コントロールなどの UI 固有のオプション。
`i18n`	`I18nOptions`	`{}`	図書館独自のテキストの言語。 UI の翻訳を参照してください。

使用法

const container = document.getElementById('graph-container')
const options = { 
    isDirected: true,
    callbacks: {
        onNodeClick: (e, node) => console.log(`nodeClick: ${node.id}`),
    },
    layout: {
        type: 'force',
    },
    render: {
        defaultNodeStyle: {
            shape: 'square',
        },
    },
    simulation: {
        d3ManyBodyStrength: -30
    },
    UI: {
        mode: 'full'
    },
}
const graph = Pivotick(container, options)

コールバック

Pivotick を使用すると、callbacks オプションを通じてユーザーインタラクションやシミュレーションイベントに接続できます。ユーザーまたはグラフによって生成されるさまざまなイベントに関数を提供できます。

詳細については、コールバックページをご覧ください。

コールバックのサンプル:

コールバック	パラメータ	説明
`onNodeClick`	`(event: PointerEvent, node: Node, element: svg)`	ノードがクリックされると発生します。
`onNodeHoverIn`	`(event: PointerEvent, node: Node, element: svg)`	マウスがノードに入ると発生します。
`onSimulationTick`	`()`	シミュレーションティックごとに発生します (カスタムレンダリングに役立ちます)。

情報

element タイプは、オプション render.type == "svg" の場合のみ svg になります。

例

import Pivotick from './pivotick.es.js'

options = {
    callbacks: { 
        onNodeClick: (event, node) => {
            console.log('Node clicked:', node.id)
        },
        onNodeHoverIn: (event, node) => {
            console.log('Mouse entered node:', node.id)
        },
        onSimulationTick: () => {
            console.log('Simulation tick')
        }
    }
}
const graph = new Pivotick(container, data, options)

レイアウトオプション

Pivotick は、ノードを配置するための複数のレイアウト戦略をサポートしています。 layout オプションを使用してレイアウトを構成できます。

オプション	種類	デフォルト	説明
`type`	`'force' \| 'tree' \| 'structured'`	`'force'`	使用するレイアウトアルゴリズム。 `'force'` は、物理ベースの力のレイアウトを適用します。 `'tree'` はノードをツリー構造に配置します。 `'structured'` 小さなグラフを配置して固定します。「構造化レイアウト」を参照してください。

ツリーレイアウトのオプション

type: 'tree' を選択すると、ツリーの方向を選択し、オプションでノードを放射状のレイアウトに配置できます。

オプション	種類	デフォルト	説明
`horizontal`	`boolean`	`false`	ノードを垂直ではなく水平に配置します。
`radial`	`boolean`	`false`	ノードを垂直ではなく放射状に配置します。

例

import Pivotick from './pivotick.es.js'

const options = {
    layout: {
        type: 'tree',
        radial: true,
    // },
    // UI: {
    //     mode: 'static'
    }
}
const graph = new Pivotick(container, data, options)

レンダリングオプション

Pivotick では、render オプションを使用して、ノード、エッジ、ラベルの表示方法をカスタマイズし、ズームや複数選択などのビューポートの操作を構成できます。

オプション	種類	デフォルト	説明
`renderNode`	`(node: Node) => HTMLElement \| string \| void`	`undefined`	ノードのカスタムレンダラー。
`defaultNodeStyle`	NodeStyle	defaultNodeStyle	すべてのノードに適用されるデフォルトのスタイル。
`nodeTypeAccessor`	`(node: Node) => string \| undefined`	`undefined`	ノードのタイプにアクセスする関数。`nodeStyleMap` とともに使用されます。
`nodeStyleMap`	`Record<string, NodeStyle>`	`{}`	ノードタイプ (`nodeTypeAccessor` から) をスタイルにマップします。
`minLabelFontSize`	`number`	`9`	レンダリングされたフォントサイズ (CSS ピクセル単位)。これを下回るとラベルは描画されません。 `0` はズームごとに描画します。
`zoomEnabled`	`boolean`	`true`	ズームを有効にします。
`dragEnabled`	`boolean`	`true`	ノードのドラッグを有効にします。

レンダリングの種類

ヒント

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

defaultNodeStyle、defaultEdgeStyle、defaultLabelStyle は、すべての要素の基本的な外観を定義します。
nodeTypeAccessor + nodeStyleMap を使用すると、各要素のタイプに基づいて動的なスタイルを設定できます。
renderNode と renderLabel を使用すると、ノードとラベルの描画方法を完全にカスタマイズできます (HTML またはテキストを返すことができます)。

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

const options = {
    render: {
        defaultNodeStyle: {
            shape: 'square',
            size: 4,
            color: '#007acc',
            textColor: '#fff',
            strokeWidth: 0,
        },
        defaultEdgeStyle: {
            markerStart: 'circle',
            markerEnd: 'arrow',
        },
        defaultLabelStyle: {
            fontSize: '6px',
        },
    }
}

シミュレーションオプション

シミュレーションオプションは、グラフシミュレーションエンジンのノードとエッジの物理およびレイアウト動作を制御します。

詳細については、D3-force 公式ドキュメントを確認してください。

ほとんどの場合、これらのオプションを変更する必要はありません: デフォルトでは Pivotick ノードの数からレイアウト自体を調整しますサイズとキャンバスを調整し、グラフの変化に合わせて調整を続けます。強制オプションの設定グラフを選択して値を保持します — または simulation.physics を 'auto' / に設定します 'manual' 明確にすること。

UIオプション

Pivotick は、グラフの上に柔軟な UI レイヤーを提供し、ユーザーがノード、エッジ、キャンバスと対話する方法を制御できるようにします。 UI オプションを使用すると、次のことができます。

UI の全体的なモード (フル、ビューア、静的など) を構成します。
サイドバー とパネルをカスタマイズして、プロパティや追加情報を表示します。
オプションのカスタムレンダラーを使用して、ノードとエッジの tooltips を定義します。
ノード、エッジ、キャンバスのコンテキストメニューを設定します。
統合で使用しない機能をオフ にします。

UIモード

mode オプションは、グラフ UI の全体的な動作と対話レベルを制御します。

full デフォルト: すべてのパネル、メニュー、およびインタラクションが有効になった完全な UI。
light: 重要なインタラクションが有効になっている最小限の UI。
viewer: UI パネルを表示せずに、グラフの移動 (パン、ズーム、ドラッグ) のみを許可します。
static: 静的グラフ、UI パネルやインタラクションなし。グラフは読み取り専用です。

Pivotick を画像スタイルで使用するには、次を使用します。

const options = {
    UI: {  
        mode: 'viewer'
    },
}

構成オプション ​

メインPivotickオプション ​

使用法 ​

コールバック ​

例 ​

レイアウトオプション ​

ツリーレイアウトのオプション ​

例 ​

レンダリングオプション ​

レンダリングの種類 ​

シミュレーションオプション ​

UIオプション ​

UIモード ​