GraphVis

一个图可视化库, 支持上万节点、边的渲染,渲染层基于PixiJS。

示例

基础

• 基础示例(Source)

元素

节点

• 概览(Source)
• 圆形(Source)
• (圆角)矩形(Source)
• 椭圆形(Source)
• 图片(Source)
• 多边形(Source)
• 多角星(Source)
• 文本(Source)
• bitmap文本(Source)
• 自定义节点(Source)

边

• 自适应(Source)
• 自循环边(Source)
• 二次贝塞尔曲线(Source)
• 三次贝塞尔曲线(Source)

Link

• 连接线,创建边(Source)

主题

• theme(Source)

布局

• 概览(Source)
• d3-force(Source)
• random(Source)

交互

• 边/节点增删改查,状态切换等(Source)
• 拖拽(Source)
• 缩放(Source)

性能

• 5000元素(Source)
• 20000元素(Source)
• 60000元素(Source)

文档

快速开始

1.直接使用

<!-- 准备一个容器 -->
<div id="container" style="width: 500px; height: 500px"></div>
<!-- 引入pixi.js-->
<script src="https://cdn.jsdelivr.net/npm/pixi.js"></script>
<!-- 引入graph-vis-->
<script src="https://unpkg.com/@zjfcool/graph-vis"></script>
<script>
  const { GraphVis } = Graph;
  async function init() {
    const graph = new GraphVis({
      container: "#container",
      data, // 默认: {edges:[],nodes:[]}
      width: container.clientWidth,
      height: container.clientHeight,
    });
    await graph.init();
  }
  init();
</script>

2.安装使用

1. 安装依赖

npm install pixi.js @zjfcool/graph-vis

2. 基本使用

// index.html 准备一个容器
<div id="container" style="width: 500px; height: 500px"></div>;
// main.js 引入安装包
import { GraphVis } from "@zjfcool/graph-vis";
async function init() {
  const graph = new GraphVis({
    container: "#container",
    data, // 默认: {edges:[],nodes:[]}
    width: container.clientWidth,
    height: container.clientHeight,
  });
  await graph.init();
}
init();

配置

通用类型声明

type Point = { x: number; y: number };
type Segment = { p1: Point; p1: Point };
type NodeAttributes = { [key: string]: any };
type EdgeAttributes = { [key: string]: any };
type GraphAttributes = {
  nodes: NodeAttributes[];
  edges: EdgeAttributes[];
};
type AttrFunc<T = any, D = any> = (d?: D) => T;
type AttrType<T = any, D = any> = T | AttrFunc<T, D>;
type NodeType =
  | "circle"
  | "ellipse"
  | "image"
  | "polygon"
  | "rect"
  | "text"
  | "bitmap-text"
  | "star"
  | (string & {});
type DrawBy = "sprite" | "graphics";
type TextType = string | number | { toString: () => string };
/**
 * 递归遍历纯对象属性使其为转换为AttrType
 * 应用示例:
 * type A ={
 *  color: string;
 *  background:string;
 *  stroke:{
 *      width: number;
 *  }
 * }
 * 经过DataDriven,将转化为:
 * type A = {
 *   color: AttrType<string>;
 *   background: AttrType<string>;
 *   stroke: {
 *      width: AttrType<number>;
 *   }
 * }
 * 这样表示的意图为：
 * 每个属性值既可以使用原始类型也可以使用函数动态生成原始类型的内容
 */
type DataDriven<T, D = any> = T extends undefined
  ? undefined
  : T extends (...args: any[]) => any
    ? AttrType<T, D>
    : T extends any[]
      ? AttrType<T, D>
      : T extends NonRecursiveTypes
        ? AttrType<T, D>
        : T extends object
          ? { [K in keyof T]: DataDriven<T[K], D> }
          : AttrType<T, D>;
type GFillStyle<D = any> = DataDriven<FillStyle, D> | AttrType<FillInput, D>;
type GStrokeStyle<D = any> = DataDriven<StrokeStyle, D> | AttrType<StrokeInput, D>;
type GTextStyleOptions<D = any> = DataDriven<TextStyleOptions, D>;
type Placement = "center" | "left" | "right" | "top" | "bottom";
type LabelType = "text" | "bitmap-text";
type EdgeLabelPositionMode = "local" | "global";
type GraphologyType = `mixed` | `undirected` | `directed`;

图配置项(GraphVisOptions)

GraphVisOptions继承ApplicationOptions，主要属性有以下: | 属性 | 类型 | 默认值 | 描述 | |:---|:---|:---|:---| |container| string|HTMLElement|document.body|图容器,css selector 或者 HTMLElement| |width|number|500|图的宽度| |height|number|500|图的高度| |type|GraphologyType|mixed|图的类型| |multi|boolean|true|图是否允许多条边| |allowSelfLoops|boolean|true|图是否允许有自循环边| |background|ColorSource|#F8F9FB|图背景色，详情| |resolution|number|window.devicePixelRatio|设备像素比｜ |data|GraphAttributes|{nodes:[],edges:[]}|图数据| |interactable|boolean|true|是否允许图的交互行为| |resizeTo|HTMLElement| Window|-|用一个元素自动调整图的位置与大小。| |resizeDebounceTime|number|500|resize事件触发时监听函数延时执行时间,单位ms| |layout|LayoutOptions|-|图的布局配置项| |node|NodeOptions|-|图节点的配置项| |edge|EdgeOptions|-|图边的配置项| |link|LinkOptions|-|图在进行边的编辑时,那条动态连接边的配置项| |zoom|ZoomOptions|-|图缩放平移功能的相关配置项| |drag|DragOptions|-|图节点拖拽功能的相关配置项| |theme|string|light|图主题的相关配置|

更多属性请查看:ApplicationOptions

节点配置项(NodeOptions)

| 属性 | 类型 | 默认值 | 描述 | | :---------- | :----------------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------- | | type | AttrType<NodeType> | circle | 节点的类型 | | drawBy | AttrType<DrawBy> | graphics | 节点基于Graphics或Sprite进行绘画 | | state | NodeStateOptions | - | 节点状态配置项 | | textValue | AttrType<TextType> | - | 当节点类型为text或bitmap-text时生效,返回内容最终渲染为文本节点 | | style | NodeStyleOptions | - | 节点样式配置项 | | labelConfig | NodeLabelConfigOptions | - | 节点标签配置项 |

节点样式配置项(NodeStyleOptions)

| 属性 | 类型 | 默认值 | 描述 | drawBy | | :---------- | :------------------------------------------------- | :-------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------: | | visible | AttrType<boolean> | true | 节点显示或隐藏 | - | | x | AttrType<number> | 0 | 节点x坐标 | - | | y | AttrType<number> | 0 | 节点y坐标 | - | | size | AttrType<number \| [number, number] \| number[]> | 20 | 节点大小尺寸 | - | | pointNum | AttrType<number> | - | 节点类型为star时表示star有pointNum个角,节点类型为polygon时为pointNum边形,对其他节点类型不生效 | - | | rotation | AttrType<number> | 0 | 节点旋转角度 | - | | imgUrl | AttrType<string> | - | 节点类型为image时才生效,表示图片的地址 | - | | radius | AttrType<number> | 0 | 节点类型为rect时才生效,表示圆角值 | graphics | | fill | GFillStyle | - | 节点填充的样式,FillStyle详情,FillInput详情 | graphics | | stroke | GStrokeStyle | - | 节点边的样式,StrokeStyle,StrokeInput | graphics | | halo | AttrType<boolean> | false | 节点背景隐藏或显示 | graphics | | haloFill | GFillStyle | - | 节点背景填充样式 | graphics | | haloStroke | GStrokeStyle | - | 节点背景边样式 | graphics | | haloSpacing | AttrType<number> | 3 | 节点背景边与节点边的间距 | - | | haloRadius | AttrType<number> | 0 | 当节点类型为rect时,节点背景圆角值 | graphics | | haloTint | AttrType<ColorSource> | #F8F9FB | 节点drawBy为sprite时生效，为节点背景的填充色 | sprite | | haloAlpha | AttrType<number> | 0.55 | 节点drawBy为sprite时生效,节点背景的透明度 | sprite | | tint | AttrType<ColorSource> | #F8F9FB | 节点drawBy为sprite时生效,表示节点颜色 | sprite | | alpha | AttrType<number> | 1 | 节点drawBy为sprite时生效,表示节点透明度 | sprite |

当节点类型为text或bitmap-text时会增多一些属性TextStyleOptions,这些属性类型都会映射为AttrType<T>。

节点标签配置项(NodeLabelConfigOptions)

| 属性 | 类型 | 默认值 | 描述 | | :-------- | :---------------------- | :----------: | :----------------------------------------------------------------------------------- | | type | AttrType<LabelType> | text | 使用text|bitmap-text绘画文本内容 | | drawBy | AttrType<DrawBy> | - | 默认继承上级drawBy配置，如果设置将使用设置后的drawBy,这里的drawBy会应用到label背景上 | | labelText | AttrType<TextType> | (d)=>d.label | 设置要显示的文本内容 | | style | NodeLabelStyleOptions | - | label样式配置项 |

节点标签样式配置项(NodeLabelStyleOptions)

| 属性 | 类型 | 默认值 | 描述 | drawBy | | :---------- | :---------------------- | :--------------: | :---------------------------- | :------: | | visible | AttrType<boolean> | false | 节点标签的现实与隐藏 | - | | placement | Placement | right | 节点标签整体位置的设置 | - | | offsetY | AttrType<number> | 0 | 节点标签的Y轴偏移量 | - | | offsetX | AttrType<number | 0 | 节点标签的X轴偏移量 | - | | halo | AttrType<boolean> | false | 节点标签背景显示与隐藏 | - | | haloFill | GFillStyle | - | 节点标签背景填充样式 | graphics | | haloStroke | GStrokeStyle | - | 节点标签背景边样式 | graphics | | haloSpacing | AttrType<number> | 0 | 节点标签背景边与label边的间距 | - | | haloRadius | AttrType<number> | 0 | 节点标签背景边的圆角值 | graphics | | haloTint | AttrType<ColorSource> | 节点标签背景颜色 | sprite | | haloAlpha | AttrType<number> | 0.55 | 节点标签背景透明度 | sprite |

其他属性为TextStyleOptions,这些属性类型都会映射为AttrType<T>。

节点状态配置项(NodeStateOptions)

默认有active,selected,inactive三个状态的配置项,你可以自行添加更多的节点状态配置项。 | 属性 | 类型 | 默认值 | 描述 | |:---|:---|:---:|:---| |[key:string]|NodeStateStyleOptions|-|对应状态的样式配置项|

节点状态样式配置项(NodeStateStyleOptions)

NodeStateStyleOptions 继承 NodeStyleOptions 并扩展了以下属性: | 属性 | 类型 | 默认值 | 描述 | |:---|:---|:---:|:---| |labelStyle|NodeLabelStyleOptions|-|节点标签样式配置项，详情见上|

示例代码:

import {GraphVis} from "@zjfcool/graph-vis";
new GraphVis({
    ...,
    node:{
        type: "circle",
        state: {
            active: {
                halo: true,
                haloSpacing: 3,
            },
            selected: {
                halo: true,
                haloSpacing: 3,
            },
            inactive: {
                halo: false,
            },
        },
        style: {
            visible: true,
            size: 20,
            pointNum: 5,
            rotation: 0,
            radius: 0,
            haloRadius: 0,
            halo: false,
            haloSpacing: 3,
            alpha: 1,
            haloAlpha: 0.55,
        },
        labelConfig: {
            labelText: (d) => d.label,
            style: {
                visible: true,
                placement: d=>d.id%2===0?"right":"left",
                offsetX: 0,
                offsetY: 0,
                fontSize: 12,
                halo: false,
                haloSpacing: 0,
                haloRadius: 2,
                haloAlpha: 0.55,
            },
        },
    }
})

边配置项(EdgeOptions)

| 属性 | 类型 | 默认值 | 描述 | | :---------- | :----------------------- | :------: | :--------------------------------------------------- | | type | AttrType<string> | auto | 边类型内置了auto|line|quadratic|cubic四种类型的边 | | id | string | id | 边ID对应的key | | source | string | source | 边source对应的key | | target | string | target | 边target对应的key | | drawBy | AttrType<DrawBy> | graphics | 边以Graphics还是Sprite的形式绘画 | | state | EdgeStateOptions | - | 边状态样式配置项 | | style | EdgeStyleOptions | - | 边样式配置项 | | arrowConfig | EdgeArrowConfigOptions | - | 边箭头配置项 | | labelConfig | EdgeLabelConfigOptions | - | 边标签配置项 |

边样式配置项(EdgeStyleOptions)

| 属性 | 类型 | 默认值 | 描述 | drawBy | | :---------------- | :------------------------------------- | :----: | :---------------------------------------------------------------------------------------------------------------------------------------------------- | :------: | | visible | AttrType<boolean> | false | 边的显示与隐藏 | - | | smoothness | AttrType<number> | 0.75 | 曲线边的柔和度值越大越顺滑 | - | | quadraticAlongT | AttrType<number> | 0.5 | 确定二次贝塞尔曲线控制点位置的向量在边的中的位置,0为边的起始位置,1为边的末尾,0.5为边的中间位置,使用该值可以沿边来回移动二次贝塞尔曲线控制点的位置 | - | | quadraticRotation | AttrType<number> | 0 | 确定二次贝塞尔曲线控制点位置的向量的方向,正值为顺时针旋转向量,负值为逆时针旋转向量 | - | | quadraticSpacing | AttrType<number> | 40 | 二次贝塞尔曲线控制点的间距 | - | | cubicAlongT | AttrType<number \| [number, number]> | - | 确定三次贝塞尔曲线两个控制点位置的向量在边的中的位置,0为边的起始位置,1为边的末尾,0.5为边的中间位置,使用该值可以沿边来回移动三次贝塞尔曲线控制点的位置 | - | | cubicRotation | AttrType<number \| [number, number]> | - | 确定三次贝塞尔曲线两个控制点位置的向量的方向,正值为顺时针旋转向量,负值为逆时针旋转向量 | - | | cubicSpacing | AttrType<number \| [number, number]> | - | 确定三次贝塞尔曲线控制点之间的间距 | - | | stroke | GStrokeStyle | - | 边的填充样式 | graphics | | halo | AttrType<boolean> | false | 边背景的显示与隐藏 | - | | haloStroke | GStrokeStyle | - | 边背景填充样式 | graphics | | haloSpacing | AttrType<number> | 3 | 边背景与边的间距 | - | | haloTint | AttrType<ColorSource> | - | 边背景的颜色 | sprite | | haloAlpha | AttrType<number> | 0.55 | 边背景透明度 | sprite | | tint | AttrType<ColorSource> | - | 边的颜色 | sprite | | width | AttrType<number> | 1 | 边的宽度 | sprite | | alpha | AttrType<number> | 1 | 边的透明度 | sprite |

Tip:构建一条贝塞尔曲线需要确定控制点的位置，quadraticAlongT/cubicAlongT确定在边的哪个位置,quadraticRotation/cubicRotation确定控制点沿着哪个方向偏移,quadraticSpacing确定沿着既定位置和方向偏移的距离，最终确定了控制点的位置,进而调整曲线的形状。

边箭头配置项(EdgeArrowConfigOptions)

| 属性 | 类型 | 默认值 | 描述 | | :---- | :---------------------- | :----: | :--------------- | | style | EdgeArrowStyleOptions | - | 边箭头样式配置项 |

边箭头样式配置项(EdgeArrowStyleOptions)

| 属性 | 类型 | 默认值 | 描述 | | :---------------- | :----------------------------- | :----: | :---------------------------------------------------------------------- | | visible | AttrType<boolean> | true | 边箭头显示与隐藏 | | tailMidpointRatio | AttrType<number> | 0.2 | 边箭头尾部中间点占箭头长度的比例，推荐值为[0,1) | | size | AttrType<number \| number[]> | [6, 4] | 边箭头的宽高值 | | alongT | AttrType<number> | 1 | 箭头沿着边方向的位置,0为边的起始位置,1为边的末尾,0.5为边的中间,以此类推 | | fill | GFillStyle | - | 边箭头填充样式 | | stroke | GStrokeStyle | - | 边箭头描边样式 |

边标签配置项(EdgeLabelConfigOptions)

| 属性 | 类型 | 默认值 | 描述 | | :-------- | :---------------------- | :------------: | :------------------- | | type | AttrType<LabelType> | text | 边标签类型 | | drawBy | AttrType<DrawBy> | - | 默认与边的drawBy一致 | | labelText | AttrType<TextType> | (d) => d.label | 边标签文本内容 | | style | EdgeLabelStyleOptions | - | 边标签样式配置项 |

边标签样式配置项(EdgeLabelStyleOptions)

| 属性 | 类型 | 默认值 | 描述 | drawBy | | :----------------- | :---------------------- | :----: | :-------------------------------------------------------------------------------------- | :------: | | visible | AttrType<boolean> | true | 边标签的显示与隐藏 | - | | alongT | AttrType<number> | 0.5 | 标签在边上的位置,0为边的起始位置,1为边的末尾,0.5为边的中间 | - | | offsetX | AttrType<number> | 0 | 标签X轴方向偏移量 | - | | offsetY | AttrType<number> | 0 | 标签Y轴方向偏移量 | - | | alongTPositionMode | EdgeLabelPositionMode | local | alongT属性对应的坐标系统local为相对于当前边的坐标系统,global相对于全局坐标系统 | - | | offsetPositionMode | EdgeLabelPositionMode | local | offsetX/offsetY属性对应的坐标系统local为相对于当前边的坐标系统,global相对于全局坐标系统 | - | | halo | AttrType<boolean> | false | 边标签背景显示与隐藏 | - | | haloFill | GFillStyle | - | 边标签背景填充样式 | graphics | | haloStroke | GStrokeStyle | - | 边标签背景描边样式 | graphics | | haloSpacing | AttrType<number> | 0 | 边标签背景与标签间距 | - | | haloRadius | AttrType<number> | 0 | 标签背景圆角值 | graphics | | haloTint | AttrType<ColorSource> | - | 标签背景颜色 | sprite | | haloAlpha | AttrType<number> | - | 标签背景透明度 | sprite |

其他标签文本属性为:TextStyleOptions,这些属性类型都会映射为AttrType<T>。

边状态样式配置项(EdgeStateOptions)

边状态默认有active,selected,inactive三个配置项,key的类型为string。 | 属性 | 类型 | 默认值 | 描述 | |:---|:---|:---:|:---| |[key:string]|EdgeStateStyleOptions|-|一个状态对应一个边状态样式配置项|

边状态样式配置项(EdgeStateStyleOptions)

EdgeStateStyleOptions 继承 EdgeStyleOptions, 还有以下属性: | 属性 | 类型 | 默认值 | 描述 | |:---|:---|:---:|:---| |labelStyle|EdgeLabelStyleOptions|-|标签样式配置项| |arrowStyle|EdgeArrowStyleOptions|-|箭头样式配置项|

示例代码:

import {GraphVis} from "@zjfcool/graph-vis";
new GraphVis({
    ...,
    edge:{
        type:"auto",
        state: {
            active: {
                halo: true,
                haloSpacing: 3,
                haloAlpha: 0.55,
            },
            selected: {
                stroke: {
                    width: d=>d.id>100?2:1,
                },
                halo: true,
                width: 2,
                haloSpacing: 3,
                haloAlpha: 0.55,
            },
            inactive: {
                halo: false,
            },
        },
        style: {
            visible: (d)=> d.id%2===0,
            smoothness: 0.75,
            halo: false,
            haloSpacing: 3,
            alpha: 1,
            stroke: {
                width: 1,
            },
            width: 1,
        },
        arrowConfig: {
            style: {
                visible: true,
                size: [6, 4],
                tailMidpointRatio: 0.2,
                alongT: 1,
            },
        },
        labelConfig: {
            labelText: (d) => d.label,
            style: {
                visible: true,
                alongT: (d)=>0.5,
                alongTPositionMode: "local",
                offsetPositionMode: "local",
                offsetX: 0,
                offsetY: 0,
                fontSize: 12,
                halo: false,
                haloSpacing: 0,
                haloRadius: 2,
                haloAlpha: 0.55,
            },
        },
    }
})

链接配置项(LinkOptions)

默认继承EdgeOptions中的type,style,state,arrowConfig,labelConfig 属性的配置项,link如果另行配置将覆盖这些配置。drawBy为 graphics的属性都可使用

type LinkOptions<D = any> = Omit<EdgeOptions<D>, "source" | "target" | "drawBy" | "id">;

示例代码:

import {GraphVis} from "@zjfcool/graph-vis";
new GraphVis({
    ...,
    link:{
        style:{
            stroke: {
                width:3,
                color:#000
            }，
        },
        arrowConfig:{}
    }
})

布局配置项(LayoutOptions)

默认提供d3-force,random两种布局类型. | 属性 | 类型 | 默认值 | 描述 | |:---|:---|:---:|:---| |type|string|-|布局类型|

D3ForceLayoutOptions

| 属性 | 类型 | 默认值 | 描述 | | :------------ | :-------------------------------- | :------: | :-------------------------------------------------------------------- | | warmTicks | number | 0 | 预先执行布局多少次 | | cooldownTicks | number | Infinity | 执行布局多少次停止布局 | | cooldownTime | number | 1500 | 执行布局的持续时间单位ms | | alpha | number | 1 | 详情 | | alphaMin | number | 0.001 | 详情 | | alphaDecay | number | 0.01 | 详情 | | alphaTarget | number | 0 | 详情 | | velocityDecay | number | 0.4 | 详情 | | randomSource | () => number | - | 详情 | | link | D3ForceLinkOptions|false | - | 详情 | | center | D3ForceCenterOptions|false | - | 详情 | | collide | D3ForceCollideOptions|false | - | 详情 | | manyBody | D3ForceManyBodyOptions|false | - | 详情 | | x | D3ForceXOptions|false | - | 详情 | | y | D3ForceYOptions|false | - | 详情 | | radial | D3ForceRadialOptions|false | - | 详情 |

D3ForceLinkOptions

| 属性 | 类型 | 默认值 | 描述 | | :--------- | :------------------------------- | :---------: | :----------------------------------------------------- | | id | (d:any)=>string | (d) => d.id | 详情 | | distance | number \| ((d: any) => number) | 90 | 详情 | | strength | number \| ((d: any) => number) | 0.2 | 详情 | | iterations | number | - | 详情 |

D3ForceCenterOptions

| 属性 | 类型 | 默认值 | 描述 | | :------- | :------- | :----: | :------------------------------------------------------- | | x | number | 0 | 详情 | | y | number | 0 | 详情 | | strength | number | 1 | 详情 |

D3ForceCollideOptions

| 属性 | 类型 | 默认值 | 描述 | | :--------- | :------------------------------- | :----: | :----------------------------------------------------------- | | radius | number \| ((d: any) => number) | 20 | 详情 | | strength | number | 0.1 | 详情 | | iterations | number | - | 详情 |

D3ForceManyBodyOptions

| 属性 | 类型 | 默认值 | 描述 | | :---------- | :---------------------------------------------- | :------: | :--------------------------------------------------------------- | | strength | number|((d: any, index: number) => number) | -20 | 详情 | | theta | number | 0.9 | 详情 | | distanceMin | number | 1 | 详情 | | distanceMax | number | Infinity | 详情 |

D3ForceXOptions

| 属性 | 类型 | 默认值 | 描述 | | :------- | :------------------------------- | :----: | :---------------------------------------------------- | | strength | number \| ((d: any) => number) | 0.1 | 详情 | | x | number \| ((d: any) => number) | 0 | 详情 |

D3ForceYOptions

| 属性 | 类型 | 默认值 | 描述 | | :------- | :--------------------------------- | :----: | :---------------------------------------------------- | | strength | number \| ((d: any) => number) | - | 详情 | | y | number | ((d: any) => number) | - | 详情 |

D3ForceRadialOptions

| 属性 | 类型 | 默认值 | 描述 | | :------- | :------------------------------- | :----: | :--------------------------------------------------------- | | strength | number \| ((d: any) => number) | 0.1 | 详情 | | radius | number \| ((d: any) => number) | - | 详情 | | x | number | 0 | 详情 | | y | number | 0 | 详情 |

RandomLayoutOptions

| 属性 | 类型 | 默认值 | 描述 | | :----- | :----------------- | :----: | :---------------------------------- | | width | number | 500 | 随机布局的宽度 | | height | number | 500 | 随机布局的高度 | | center | [number, number] | [0,0] | 中心点,作用为以哪个中心所用随机分布 |

示例代码:

import {GraphVis} from "@zjfcool/graph-vis";
new GraphVis({
    ...,
    layout:{
        type:"d3-force",
        warmTicks: 0,
        cooldownTicks: Infinity,
        cooldownTime: 1500,
        collide: {
            radius: 20,
            strength: 0.1,
        },
        link: {
            id: (d) => d.id,
            distance: 90,
            strength: 0.2,
        },
        manyBody: {
            strength: -20,
        },
        alphaDecay: 0.01,
    }
})

缩放配置项(ZoomOptions)

| 属性 | 类型 | 默认值 | 描述 | | :----------------- | :------------------------------------- | :----: | :---------------------------------------------------- | | enable | boolean | true | 是否开启缩放功能 | | wheelDelta | (event: any) => number | - | 详情 | | extent | [[number, number], [number, number]] | - | 详情 | | scaleExtent | [number, number] | - | 详情 | | translateExtent | [[number, number], [number, number]] | - | 详情 | | clickDistance | number | - | 详情 | | tapDistance | number | - | 详情 | | enableDblclickZoom | boolean | false | 是否开启鼠标双击交互缩放的功能 | | enableWheelZoom | boolean | true | 是否开启滑轮交互缩放功能 | | filter | (event: any) => boolean | - | 详情 |

拖拽配置项(DragOptions)

| 属性 | 类型 | 默认值 | 描述 | | :------------ | :-------------------------------- | :----: | :-------------------------------------------------- | | enable | boolean | true | 开启节点拖拽功能 | | filter | (event: any) => boolean | - | 详情 | | touchable | (event: any, d: any) => boolean | - | 详情 | | clickDistance | number | - | 详情 |

主题配置项

默认有light,dark两个主题,可自定义主题. 自定义主题示例代码:

import {register,generateThemeByPrimaryColor,GraphVis} from "@zjfcool/graph-vis";
//generateThemeByPrimaryColor 函数为生成主题的快捷函数，提供一个主题色和风格(light/dark)会自动生成类型为Theme的options对象
register("theme","natrue", generateThemeByPrimaryColor("#4CAF50", "dark"));
// 或者自定义配置对象
register("theme","purple",{
    node:{}, // NodeOptions
    edge:{}, // EdgeOptions
    link:{}, // LinkOptions
    background:""//ColorSource
})
// 使用定义的主题色
new GraphVis({
    ...,
    theme:"natrue"
})

API

图实例

属性

| 属性名 | 类型 | 描述 | | :---------------------- | :------------------ | :----------------------------------------------------------------------- | | canvas | HTMLCanvasElement | canvas 元素 | | screenCenterX | number | 屏幕中心点x的值 | | screenCenterY | number | 屏幕中心y值 | | transform | ZoomTransform | 返回ZoomTransform实例对象,详情 | | order | number | 图节点的总数量 | | size | number | 图边的总数量 | | directedSize | number | 图有向边的总数量 | | undirectedSize | number | 图无向边的总数量 | | type | GraphologyType | 图的类型为有向,无向或者混合 | | multi | boolean | 图是否为多边模式 | | allowSelfLoops | boolean | 图是否允许自循环边 | | selfLoopCount | number | 图自循环边数量 | | directedSelfLoopCount | number | 图有向自循环边的数量 | | undirectedSelfLoopCount | number | 图无向自循环边的数量 | | implementation | string | 图实现的名称 |

方法

| 方法名 | 参数 | 返回值 | 描述 | | :------------------- | :--------------------------------------------------------------- | :-------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------- | | init | - | Promise | 图初始化的方法 | | destroy | - | - | 图销毁 | | draw | - | - | 图重新绘画所有节点及边,图形形状样式变化的时候会执行 | | update | - | - | 更新节点及边，当节点位置信息发生变化时，布局的时候会执行此函数 | | clear | - | graph实例 | 清空图所有的节点与边 | | clearEdges | - | graph实例 | 清空图的所有边 | | getLayout | - | BaseLayout | 获取当前图的布局实例 | | setLayoutOptions | LayoutOptions | - | 为当前图切换布局类型 | | stopLayout | - | - | 暂停当前图的布局 | | restartLayout | - | - | 重启当前布局 | | getData | - | GraphAttributes | 获取原始数据 | | setData | GraphAttributes \| (prev:GraphAttributes)=>GraphAttributes | 重新替换图的数据源 | | forEachNode | (node: BaseNode, attr: EdgeAttributes) => void | graph实例 | 循环节点实例 | | neighbors | id:string | BaseNode[] | 入参为节点ID,获取节点的相邻节点 | | nonNeighbors | id:string | BaseNode[] | 入参为节点ID,获取节点的非相邻点 | | relatedEdges | id:string | BaseEdge[] | 入参为节点ID,获取与节点相连的边 | | unrelatedEdges | id:string | BaseEdge[] | 入参为节点ID,获取与节点不相连的边 | | addNode | NodeAttributes | nodeId|undefined | 入参为节点数据,添加一个节点 | | getNode | id:string | BaseNode | 入参为节点ID，获取节点实例 | | dropNode | id:string | graph实例 | 入参为节点ID，删除图的某一个节点 | | nodes | - | BaseNode[] | 获取图的所有节点实例 | | setNodeOptions | NodeOptions | - | 动态更改节点的配置项 | | forEachEdge | (edge: BaseEdge, attr: EdgeAttributes) => void | graph实例 | 循环边实例 | | getEdge | id:string | BaseEdge | 入参为边ID,获取边实例 | | addEdge | EdgeAttributes | edgeId|undefined | 入参为边数据,为图添加一条边 | | dropEdge | id:string | - | 如参为边ID,删除图的一条边 | | edges | - | BaseEdge[] | 获取图的所有边实例 | | setEdgeOptions | EdgeOptions | - | 动态更改边的配置项 | | setThemeOptions | string | - | 入参为主题别名,切换主题 | | setLinkOptions | LinkOptions | - | 更改link配置 | | setZoomOptions | ZoomOptions | - | 更改zoom配置项 | | setDragOptions | DragOptions｜GraphVis实例 | 设置拖拽配置项 | | setZoomOptions | ZoomOptions | GraphVis实例 | 设置缩放配置项 | | getLink | - | link实例 | 获取link实例 | | getApp | - | Application 实例 | 获取Application实例 | | getGraphology | - | Graph实例 | 获取Graph实例,用于操作数据 | | global2LocalPoint | x:number,y:number | {x:number,y:number} | 入参为全局的x,y坐标值,返回本地坐标 | | local2GlobalPoint | x:number,y:number | {x:number,y:number} | 入参为本地x,y坐标值,返回全局坐标 | | getCenter | - | {x:number,y:number} | 获取当前图的中心坐标 | | translateTo | x:number,y:number | - | 图变换平移至x,y坐标点 | | translateBy | dx: number, dy: number | - | 将当前图x轴平移dx距离,y轴平移dy距离 | | centerAt | x: number, y: number, easing?: EasingType, duration?: number | - | 将当前图切换至x,y坐标中心点,easing 为动画类型,duration为动画执行时间单位ms | | zoom | k: number, easing?: EasingType, duration?: number | - | 将图缩放k倍,使用easing动画,动画执行时间为duration | | zoomToFit | zoomFactor: number = 1, easing?: EasingType, duration?: number | - | 图自适应，使整个图的节点,边都在显示区域内,zoomFactor调整整个图距离显示区域的边距,默认为1没有边距,输越小边距越大,数如果大于1图部分节点将超出显示区域 | | resetView | easing?: EasingType, duration?: number | - | 重置到初始状态,Zoom Transform将重置 | | startLinkNode | node: BaseNode, isDirected: boolean = true | - | 开始添加边的交互操作,isDirected 为true时添加有向边,false添加无向边 | | endLinkNode | - | - | 结束添加边的交互操作 | | on | event:GraphVisEvents,listener:(...args:ang[])=>void | - | 对事件监听 | | once | event:GraphVisEvents,listener:(...args:ang[])=>void | - | 对事件监听一次 | | off | event:GraphVisEvents,listener:(...args:ang[])=>void | - | 对事件的某个监听函数解绑 | | getNodeAttribute | id:string,name:string\|number | any | 获取某个节点原始数据某个属性的值 | | getNodeAttributes | id:string | any | 获取某个节点的原始数据 | | updateNodeAttribute | id:string,attr:string,cb:(v:any)=>any | GraphVis实例 | 更新某个节点的原始数据的某个属性值 | | updateNodeAttributes | id:string,cb:(attr:NodeAttributes)=>NodeAttributes | GraphVis实例 | 更新某个节点的原始数据 | | removeNodeAttribute | id:string,attr:string\|number | GraphVis实例 | 移除某个节点的原始数据的某个属性 | | hasNodeAttribute | id:string,name:string\|number | boolean | 查看某个节点是否含有某个属性 | | getEdgeAttribute | id:string,name:string\|number | any | 获取某个边的原始数据的某个属性 | | getEdgeAttributes | id:string | EdgeAttributes | 获取某个边的原始数据 | | hasEdgeAttribute | id:string,name:string\|number | boolean | 查看某个边原始数据是否含有某个属性 | | updateEdgeAttribute | id:string,name:string\|number,cb:(v:any)=>any | GraphVis实例 | 更新边原始数据的属性的某个值 | | updateEdgeAttributes | id: string, cb: (attr: EdgeAttributes) => EdgeAttributes | GraphVis实例 | 更新边原始数据 | | removeEdgeAttribute | id: string, name: string \| number | GraphVis实例 | 删除边原始数据的某个属性 |

Tip:

type EasingType =
  | "linear"
  | "back-in"
  | "back-out"
  | "back-in-out"
  | "bounce-in"
  | "bounce-out"
  | "bounce-in-out"
  | "circular-in"
  | "circular-out"
  | "circular-in-out"
  | "cubic-in"
  | "cubic-out"
  | "cubic-in-out"
  | "elastic-in"
  | "elastic-out"
  | "elastic-in-out"
  | "exponential-in"
  | "exponential-out"
  | "exponential-in-out"
  | "linear-in"
  | "linear-out"
  | "linear-in-out"
  | "quadratic-in"
  | "quadratic-out"
  | "quadratic-in-out"
  | "quartic-in"
  | "quartic-out"
  | "quartic-in-out"
  | "quintic-in"
  | "quintic-out"
  | "quintic-in-out"
  | "sinusoidal-in"
  | "sinusoidal-out"
  | "sinusoidal-in-out";

事件监听

图事件

| 事件 | 回调函数 | 描述 | | :----------- | :--------------------------------------------------------------------------- | :-------------------------------------------- | | zoom | (event: any) => void | 图进行缩放交互的过程中会触发 | | zoomstart | (event: any) => void | 图开始缩放交互触发一次 | | zoomend | (event: any) => void | 图缩放交互结束后触发一次 | | clear | ()=>void | 执行清空图方法clear时候触发 | | clearedges | ()=>void | 执行清空图的边方法clearEdges的时候触发 | | resize | (obj:{screenWidth: number;screenHeight: number;resolution: number;})=>void | resizeTo 对应的html元素尺寸发生变化的时候触发 | | beforecreate | ()=>void | 执行创建图元素方法create前触发 | | aftercreate | ()=>void | 执行创建图元素方法create后触发 | | beforedraw | ()=>void | 执行图元素绘画方法draw前触发 | | afterdraw | ()=>void | 执行图元素绘画方法draw后触发 | | beforeupdate | () => void | 执行图元素更新方法update前触发 | | afterupdate | () => void | 执行图元素更新方法update后触发 |

节点事件

触发对象为节点实例

type NodeEventCallbackParams = {
  target: BaseNode;
  originalTarget: Container;
  originalType: string;
  event: FederatedPointerEvent;
};

| 事件 | 回调函数 | 描述 | | :-------------------- | :------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------- | | node:click | (NodeEventCallbackParams)=>void | 详情 | | node:mousedown | (NodeEventCallbackParams)=>void | 详情 | | node:mousemove | (NodeEventCallbackParams)=>void | 详情 | | node:mouseout | (NodeEventCallbackParams)=>void | 详情 | | node:mouseover | (NodeEventCallbackParams)=>void | 详情 | | node:mouseup | (NodeEventCallbackParams)=>void | 详情 | | node:mouseupoutside | (NodeEventCallbackParams)=>void | 详情 | | node:pointercancel | (NodeEventCallbackParams)=>void | 详情 | | node:pointerdown | (NodeEventCallbackParams)=>void | 详情 | | node:pointermove | (NodeEventCallbackParams)=>void | 详情 | | node:pointerout | (NodeEventCallbackParams)=>void | 详情 | | node:pointerover | (NodeEventCallbackParams)=>void