pivotick v3.0.0

Pivotick

Pivotick是一个可破解的TypeScript图形可视化库，构建在D3力模拟之上。它通过交互式控件、力模拟、树布局支持以及侧边栏、数据表、上下文菜单和工具提示等可选 UI 元素来渲染有向或无向图形。

它还执行其命名的操作：pivot从数据所在的任何位置获取更多图表，将结果作为您分类的候选结果而不是将它们放在画布上，并且可以写回您保留的内容 - 具有画布上所有内容的撤消历史记录。

Pivotick完整UI

核心功能

有向图和无向图渲染
拓展 — 针对画布上的内容运行丰富操作，在停靠窗格中对结果进行分类，并仅提取您保留的内容
将拓展表的结果保存回其来源系统，并记录已交叉和未交叉的分类帐
作为一条时间线撤消和重做画布上的内容（摄取、删除、隐藏和手绘元素）
来源：每个节点和边缘都知道哪些来源为其提供担保，并且可以删除一个来源的贡献
基于力的模拟，具有可选的工人支持
树/层次结构布局支持，层次结构由数据推断或声明
自调整力布局，或从“物理”弹出按钮手动调整
停靠在画布下方的数据表，与画布和侧边栏共享一个选择
小地图、多键过滤图例和声明性过滤面板
边缘层 - 按种类键入边缘，按种类设置样式，并在不移动图形的情况下打开和关闭
不同的 UI 模式（full、light、viewer、static）
可配置的节点/边缘样式、标签、边缘徽章和回调
交互式编辑 - 使用验证和丰富挂钩进行节点编辑和边缘创建（拖动或单击）
可扩展插件 API，用于添加自定义 UI，包括左侧栏上您自己的模式

使用 Pivotick 的项目

Pivotick 帮助社区在威胁情报、漏洞研究和安全调查中探索关联数据。请查看社区展示中列出的项目：

项目	它的作用
Rulezet	浏览、分享和管理网络安全检测规则。
CTI Transmute	在 MISP 与 STIX 格式之间转换网络威胁情报。
CPE Editor · 源代码	搜索和编辑通用平台枚举（CPE）条目。
Vulnerability-Lookup · CIRCL 实例	收集、关联和分享漏洞信息。
AIL Project	为威胁情报收集、爬取和分析非结构化数据。
Threat Actor Explorer	在浏览器中探索 MISP galaxy 数据集中的威胁行为者。
FlowIntel	组织安全调查、案件和分析师任务。
CIRCL	了解 CIRCL 维护的开源网络安全项目。
MISP	使用开放标准分享、存储和关联威胁情报。

正在用 Pivotick 构建项目？ 我们很乐意在这里展示它！请在 issue #34 中分享项目名称、链接以及你如何使用 Pivotick 的简短说明。欢迎任何规模的项目。

浏览文档中的项目展示。

快速入门

基本用法

Pivotick 可以用作现代 JavaScript 模块，也可以通过脚本标签直接在浏览器中使用。

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

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

安装

bash

npm install pivotick

1. 使用 GitHub 版本（无需构建）

如果您不想自己构建项目，请从 GitHub 下载最新版本。

步骤：

转到存储库的发布页面
下载最新的 dist 包
将其提取到您的项目中

您应该获得如下文件：

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）

html

<!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. 从源代码构建（推荐用于开发）

如果您想要完全控制库或需要修改它，请使用此选项。

bash

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

构建后，编译后的文件将在以下位置可用：

dist/

然后您可以根据您的环境直接导入它们：

ES模块

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

浏览器构建

html

<script src="./dist/pivotick.iife.js"></script>

样式

Pivotick 带有pivotick.css 中包含的默认样式：

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

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

css

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

.pvt-node circle {
  fill: cyan;
}

文档与 API 参考

完整文档：https://pivotick.github.io/Pivotick/
类型化 API 参考：https://pivotick.github.io/Pivotick/api/html/classes/Pivotick.html

项目脚本

bash

npm run dev               # Start Vite dev server
npm run build             # Build full project (types + all bundles)
npm run build:es          # Build ES module bundle
npm run build:browser     # Build browser (UMD + IIFE) bundle
npm run build:worker      # Build worker bundle
npm run preview           # Preview production build

npm run lint              # Run ESLint
npm run lint_fix          # Fix lint issues

npm run vitepress:dev     # Run documentation site locally
npm run vitepress:build   # Build documentation site
npm run vitepress:preview # Preview documentation build

npm run typedoc:dev       # Watch TypeDoc output
npm run typedoc:build     # Generate API docs

npm run docs:build        # Build full documentation (typedoc + vitepress)

参与贡献

创建分支
运行npm run build和npm run lint
打开一个拉取请求，其中包含行为和 API 更改的简明摘要
保持 PR 的重点和小规模

Pivotick ​

核心功能 ​

使用 Pivotick 的项目 ​

快速入门 ​

基本用法 ​

安装 ​

1. 使用 GitHub 版本（无需构建） ​

2. 从源代码构建（推荐用于开发） ​

样式 ​

文档与 API 参考 ​

项目脚本 ​

参与贡献 ​

Pivotick

核心功能

使用 Pivotick 的项目

快速入门

基本用法

安装

1. 使用 GitHub 版本（无需构建）

2. 从源代码构建（推荐用于开发）

样式

文档与 API 参考

项目脚本

参与贡献