快速入门

Pivotick 是一个基于D3 力模拟构建、易于定制的 TypeScript 图可视化库。它可以渲染有向图或无向图，并提供交互控件、力模拟、树形布局，以及侧栏、工具栏、上下文菜单和提示框等可选界面组件。

基本用法

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 中包含的默认样式：

您可以通过两种方式自定义外观：

• 使用Pivotick的内置类。
• 使用 CSS 变量 覆盖样式。

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

.pvt-node circle {
  fill: cyan;
}