はじめに

Pivotick は、D3 フォース シミュレーション に基づいて構築された、ハッキング可能な TypeScript グラフ視覚化ライブラリです。インタラクティブなコントロール、フォース シミュレーション、ツリー レイアウトのサポート、およびサイドバー、ツールバー、コンテキスト メニュー、ツールチップなどのオプションの UI 要素を備えた有向グラフまたは無向グラフをレンダリングします。

基本的な使い方

Pivotick は、最新の JavaScript モジュールとして、またはスクリプト タグを介してブラウザで直接使用できます。

const app = new Pivotick({
    container: document.getElementById('app'),
    data: {
        nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
        ],
        edges: [
            { from: 1, to: 2 }
        ]
    }
})

インストール

1. GitHub リリースを使用します (ビルドは必要ありません)

自分でプロジェクトをビルドしたくない場合は、GitHub から最新リリースをダウンロードしてください。

手順:

1. リポジトリの「リリース」ページに移動します。
2. 最新の dist バンドルをダウンロードする
3. プロジェクトに抽出します

次のようなファイルを取得する必要があります。

pivotick.es.js
pivotick.umd.js
pivotick.iife.js
pivotick.css

次に、環境に応じてそれらを使用します。

ESモジュール（推奨）

import { Pivotick } from 'pivotick'
import 'pivotick/dist/pivotick.css'

const app = new Pivotick({
    container: document.getElementById('app'),
    data: {
        nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
        ],
        edges: [
            { from: 1, to: 2 }
        ]
    }
})

ブラウザ IIFE / UMD

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/pivotick.css" />
    <script src="/assets/pivotick.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const app = new Pivotick({
        container: document.getElementById('app'),
        data: {
          nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
          ],
          edges: [
            { from: 1, to: 2 }
          ]
        }
      })
    </script>
  </body>
</html>

2. ソースからビルドする (開発に推奨)

ライブラリを完全に制御したい場合、またはライブラリを変更する必要がある場合は、これを使用します。

git clone https://github.com/pivotick/pivotick.git
cd pivotick
npm install
npm run build

ビルド後、コンパイルされたファイルは次の場所で利用可能になります。

dist/

その後、環境に応じてそれらを直接インポートできます。

ESモジュール（推奨）

import { Pivotick } from 'pivotick'
import 'pivotick/dist/pivotick.css'

const app = new Pivotick({
    container: document.getElementById('app'),
    data: {
        nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
        ],
        edges: [
            { from: 1, to: 2 }
        ]
    }
})

IIFE / UMD

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/pivotick.css" />
    <script src="/assets/pivotick.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const app = new Pivotick({
        container: document.getElementById('app'),
        data: {
          nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
          ],
          edges: [
            { from: 1, to: 2 }
          ]
        }
      })
    </script>
  </body>
</html>

スタイリング

Pivotick には、pivotick.css に含まれるデフォルトのスタイルが付属しています。

外観は次の 2 つの方法でカスタマイズできます。

• Pivotick の 組み込みクラス を使用します。
• CSS 変数 を使用してスタイルをオーバーライドします。

:root {
  --pvt-node-color: #FDDA24;
  --pvt-node-stroke: #000000;
  --pvt-edge-stroke: #EF3340;
}

.pvt-node circle {
  fill: cyan;
}