笔记

Appearance

大纲

功能组件 ​

对于一些具有独立功能的组件, 可以通过插件的方式引入

js
const minimap = new Minimap({
  // ...配置
});
const graph = new Graph({
  plugins: [minimap],
  // ...
});

Legend ​

图例, 用于说明不同类型 节点或边 代表的含义, 图例支持 高亮 和 过滤 交互

  • 支持的 Node 类型: circle、rect、ellipse
  • 支持的 Edge 类型: line、cubic、quadratic
  • 数据项的 order 字段可用于对图例进行排序
ts
interface LegendConfig {
  data: GraphData; // 会根据数据项的 'type' 进行分类(支持部分类型), 'order' 进行排序
  position?: // 图例在画布中的位置, 默认 'top'
  | "top"
    | "top-left"
    | "top-right"
    | "right"
    | "right-top"
    | "right-bottom"
    | "left"
    | "left-top"
    | "left-bottom"
    | "bottom"
    | "bottom-left"
    | "bottom-right";
  padding?: number | number[];
  margin?: number | number[];
  offsetX?: number; // 用于指定 'position' 后位置微调
  offsetY?: number; // 用于指定 'position' 后位置微调
  containerStyle?: ShapeStyle;
  flipPage?: boolean; // NOTE: 缺少文档说明
  horiSep?: number; // 图例间水平间距
  vertiSep?: number; // 图例间垂直间距
  layout?: "vertical" | "horizontal"; // 默认 'horizontal'
  width?: number | "fit-content";
  height?: number | "fit-content";
  align?: "center" | "right" | "left"; // 默认 'center'
  title?: string;
  titleConfig?: {
    position?: "center" | "right" | "left";
    offsetX?: number;
    offsetY?: number;
    [key: string]: unknown; // 见 ShapeStyle
  };
  filter?: {
    enable?: boolean; // 默认 false
    multiple?: boolean; // 默认 false, trigger 为 'click' 可以为 true
    trigger?: "click" | "mouseenter"; // 默认 'click'
    legendStateStyles?: {
      active?: ShapeStyle; // 过滤时, 图例 'active' 状态下的样式
      inactive?: ShapeStyle; // 过滤时, 图例 'inactive' 状态下的样式
    };
    graphActiveState?: string; // 过滤时, 被选中元素状态名, 默认 'active'
    graphInactiveState?: string; // 过滤时, 未选中元素状态名, 默认 'inactive'
    filterFunctions?: {
      // 过滤函数, key 为对应图例数据的 `type`
      [key: string]: (d: any) => boolean;
    };
  };
}

SnapLine ​

对齐线, 拖拽场景下, 按住时根据节点位置绘制出其坐标辅助线

ts
interface SnapLineConfig {
  line?: ShapeStyle; // 辅助线样式
  itemAlignType?: boolean | "horizontal" | "vertical" | "center"; // 辅助线类型, 默认 'center'-从节点中心绘制, true 表示全部(绘制多条辅助线)
}

Grid ​

网格

ts
interface GridConfig {
  img?: string;
  follow?: boolean; // 网格是否跟随视图移动
}

Minimap ​

小地图, 当前 graph 的迷你版, 可以通过其调整画布呈现区域, 由于是对 graph 的映射, 因而具有较高的性能开支

ts
interface MinimapConfig {
  viewportClassName?: string;
  type?: "default" | "keyShape" | "delegate";
  size?: number[];
  delegateStyle?: ShapeStyle;
  refresh?: boolean;
  padding?: number;
  hideEdge?: boolean;
}

ImageMinimap ​

使用图片作为小地图展示, 需要用户指定 graphImg, 可以大幅降低性能开支, 但缺乏灵活性, 适用于较为静态的 graph
graph 变动时，需要使用 .updateGraphImg(img) 替换当前小地图

ts
interface MiniMapConfig {
  graphImg: string; // minimap 地址或 base64图片
  width?: number; // 若未指定 height, 则按照比例设置 height
  height?: number; // 若未定的 width, 则按照比例设置 width
  container?: HTMLDivElement | string | null; // 挂载的 DOM, 默认自动生成
  className?: string; // 生成的 DOM 的 class
  viewportClassName?: string; // minimap 上 DOM 的 class
  type?: "default" | "keyShape" | "delegate";
  delegateStyle?: ShapeStyle; // type 为 'delegate' 时生效
  refresh?: boolean;
}

Bundling ​

在大规模图上, 降低视觉复杂度

ts
interface BundlingConfig {
  K?: number; // 边绑定的强度, 默认 0.1
  lambda?: number; // 算法的初始步长, 默认 0.1
  divisions?: number; // 初始的切割点数, 每次迭代都会乘以 `divRate`, 默认 1
  divRate?: number; // 切割增长率, 数字越大绑定越平滑, 计算量越大, 默认 2
  cycles?: number; // 迭代次数, 默认 6
  iterations?: number; // 初始的内迭代次数，每次外迭代中将会被乘以 `iterRate`, 默认 90
  iterRate?: number; // 迭代下降率, 默认 0.6666667
  bundleThreshold?: number; // 判定边是否应该绑定在一起的相似容忍度，数值越大，被绑在一起的边相似度越低，数量越多, 默认 0.6
}

右键菜单

ts
interface MenuConfig {
  className?: string;
  getContent?: (evt?: IG6GraphEvent) => HTMLDivElement | string;
  handleMenuClick?: (target: HTMLElement, item: Item) => void; // 点击菜单项回调
  shouldBegin?: (evt?: IG6GraphEvent) => boolean; // 是否允许 menu 出现, 可借助 `ev.item` 和 `ev.target` 控制
  offsetX?: number; // 默认 6
  offsetY?: number; // 默认 6
  itemTypes?: string[]; // 作用于哪类元素上, 默认 ['node', 'edge', 'combo']
  trigger?: "click" | "contextmenu"; // 触发方式, 默认 'contextmenu'-右击
}

ToolBar ​

工具栏, 内置了部分常用操作(配置 getContent 会复写工具栏, 若要使用内置操作, 可以使用对应的方法)

  • 顺序排列: 重做('redo')、撤销('undo')、放大('zoomOut')、缩小('zoomIn')、实际大小('realZoom')、适应屏幕('autoZoom')
  • 对应方法: toolbar.redo()、toolbar.undo()、toolbar.zoomOut()、toolbar.zoomIn()、toolbar.realZoom()、toolbar.autoZoom()
ts
interface ToolBarConfig {
  container?: HTMLDivElement | string | null;
  className?: string;
  getContent?: (graph?: IGraph) => HTMLDivElement | string; // 复写 toolbar, 返回的 HTML 元素需要传递 'code' 属性, 如 `<ul><li code="demo">demo</li></ul>`
  handleClick?: (code: string, graph: IGraph) => void; // 点击图标的回调, code 见上述说明
  position?: { x: number; y: number } | null;
  // zoomSensitivity?: number;
  // minZoom?: number;
  // maxZoom?: number;
}

Tooltip ​

使用 Tooltip 插件会替换 Behavior 中的 tooltip

ts
interface TooltipConfig {
  container?: HTMLDivElement | string | null;
  className?: string;
  getContent?: (evt?: IG6GraphEvent) => HTMLDivElement | string;
  offsetX?: number; // 默认 6
  offsetY?: number; // 默认 6
  shouldBegin?: (evt?: IG6GraphEvent) => boolean; // 是否允许 tooltip 出现, 可借助 `ev.item` 和 `ev.target` 控制
  itemTypes?: string[]; // 作用于哪类元素上, 默认 ['node', 'edge', 'combo']
  trigger?: "mouseenter" | "click";
  // fixToNode?: [number, number] | undefined;
}

Fisheye ​

鱼眼放大镜, 可通过 fisheye.updateParams(params) 更新配置

ts
interface FisheyeConfig {
  trigger?: "mousemove" | "click" | "drag"; // 默认 'mousemove'
  d?: number; // 放大系数, 默认 1.5
  r?: number; // 放大区域的半径, 默认 300
  delegateStyle?: ShapeStyle;
  showLabel?: boolean; // 默认 false
  scaleRBy?: "wheel" | "drag" | "unset"; // 调整放大镜放大范围的方式, 默认 'unset'
  scaleDBy?: "wheel" | "drag" | "unset"; // 调整放大镜缩放系数的方式, 默认 'unset'
  maxR?: number; // 滚轮调整缩放范围的最大半径, 默认 图的高度
  minR?: number; // 滚轮调整缩放范围的最小半径, 默认 图的高度/20
  maxD?: number; // 默认 5, trigger 为 'mousemove' | 'click' 时，通过拖拽调整的最大缩放系数，建议取值范围 [0, 5]。若使用 minimap.updateParam 更新参数不受该系数限制
  minD?: number; // 默认 0, trigger 为 'mousemove' | 'click' 时，通过拖拽调整的最小缩放系数，建议取值范围 [0, 5]。若使用 minimap.updateParam 更新参数不受该系数限制
  showDPercent?: boolean; // 是否展示缩放系数
}

EdgeFilterLens ​

边过滤镜, 表现为一个圆圈, 经过区域的 edge 不予显示
可通过 fisheye.updateParams(params) 更新配置

ts
interface EdgeFilterLensConfig {
  /**
   * 根据边两端点作为边过滤的简单条件。
   * - 'one'：边至少有一个端点在过滤镜区域内，则在该区域内显示该边；
   * - 'both'：两个端点都在过滤区域内，则在该区域显示该边；
   * - 'only-source'：只有起始端在过滤镜区域内，则在该区域显示该边；
   * - 'only-target'：只有结束端在过滤区域内，则在该区域显示该边。
   * 更复杂的条件可以使用 shouldShow 指定
   */
  type?: "one" | "both" | "only-source" | "only-target"; // 默认 'both'
  shouldShow?: (d?: unknown) => boolean; // 自定义边的过滤
  trigger?: "mousemove" | "click" | "drag"; // 默认 'mousemove'
  r?: number; // 过滤镜半径
  delegateStyle?: ShapeStyle; // 过滤镜蒙层样式
  showLabel?: "node" | "edge" | "both" | undefined;
  scaleRBy?: "wheel" | undefined; // 调整过滤镜大小的方式, `undefined` 表示不允许调整, 默认 'wheel'
  maxR?: number; // 过滤镜最大半径, 默认 图的高度
  minR?: number; // 过滤镜最小半径, 默认 图的高度/20
}

TimeBar ​

内置了三种形态的 TimeBar, TimeBar 支持播放、快进、后退等操作，使用时需要先配置数据

  • 带趋势图的 TimeBar
  • 简易版的 TimeBar
  • 刻度 TimeBar
ts
type TimeBarType = "trend" | "simple" | "tick";
interface TrendConfig {
  readonly data: { date: string; value: string }[];
  readonly x?: number;
  readonly y?: number;
  readonly width?: number;
  readonly height?: number;
  readonly smooth?: boolean;
  readonly isArea?: boolean;
  readonly lineStyle?: ShapeStyle;
  readonly areaStyle?: ShapeStyle;
  readonly interval?: Interval;
}
type SliderOption = Partial<{
  readonly width?: number;
  readonly height?: number;
  readonly backgroundStyle?: ShapeStyle;
  readonly foregroundStyle?: ShapeStyle;
  readonly handlerStyle?: {
    width?: number;
    height?: number;
    style?: ShapeStyle;
  };
  readonly textStyle?: ShapeStyle;
  readonly start: number;
  readonly end: number;
  readonly minText: string;
  readonly maxText: string;
}>;
interface TimeBarSliceOption {
  readonly x?: number;
  readonly y?: number;
  readonly width?: number;
  readonly height?: number;
  readonly padding?: number;
  readonly selectedTickStyle?: ShapeStyle;
  readonly unselectedTickStyle?: ShapeStyle;
  readonly tooltipBackgroundColor?: string;
  readonly start?: number;
  readonly end?: number;
  readonly data: {
    date: string;
    value: string;
  }[];
  readonly tickLabelFormatter?: (d: any) => string | boolean;
  readonly tooltipFomatter?: (d: any) => string;
}
type TickCfg = {
  readonly ticks?: {
    date: string;
    value: string;
  }[];
  readonly tickLabelFormatter?: (d: any) => string | undefined;
  readonly tickLabelStyle?: ShapeStyle;
  readonly tickLineStyle?: ShapeStyle;
};
type ControllerCfg = Partial<{
  readonly group: IGroup;
  /** 控制栏的起始位置以及宽高，width height 将不缩放内部子控制器，仅影响它们的位置分布。需要缩放请使用 scale */
  readonly x?: number;
  readonly y?: number;
  readonly width: number;
  readonly height: number;
  /** 控制器背景的颜色和描边色 */
  readonly fill?: string;
  readonly stroke?: string;
  /** 整个控制栏的字体样式，优先级低于各个子控制器的 text 内的 fontFamily */
  readonly fontFamily?: string;
  /** 控制栏缩放比例 */
  readonly scale?: number;
  /** 播放速度，1 个 tick 花费时间 */
  readonly speed?: number;
  /** 是否循环播放 */
  readonly loop?: boolean;
  readonly hideTimeTypeController: boolean;
  /** ‘上一帧’按钮的样式，同时可以为其配置 scale、offsetX、offsetY 单独控制该控制器的缩放以及平移 */
  readonly preBtnStyle?: ExtendedShapeStyle;
  /** ‘下一帧’按钮的样式，同时可以为其配置 scale、offsetX、offsetY 单独控制该控制器的缩放以及平移 */
  readonly nextBtnStyle?: ExtendedShapeStyle;
  /** ‘播放’ 与 ‘暂停’ 按钮的样式，同时可以为其配置 scale、offsetX、offsetY 单独控制该控制器的缩放以及平移 */
  readonly playBtnStyle?: ExtendedShapeStyle;
  /** 控制栏背景方框的样式 */
  readonly containerStyle?: ExtendedShapeStyle;
  /** ‘速度控制器’ 的样式，包括速度的指针、速度指示滚轮（横线）、文本的样式，以及整个速度控制器的缩放（scale）与左右偏移（offsetX，offsetY） */
  readonly speedControllerStyle?: {
    offsetX?: number;
    offsetY?: number;
    scale?: number;
    pointer?: ExtendedShapeStyle;
    scroller?: ExtendedShapeStyle;
    text?: ExtendedShapeStyle;
  };
  /** ‘播放时间类型切换器’ 的样式，包括 checkbox 的框、checkbox 的选中勾、文本的样式，以及整个播放时间类型控制器的缩放（scale）与左右偏移（offsetX，offsetY） */
  readonly timeTypeControllerStyle?: {
    offsetX?: number;
    offsetY?: number;
    scale?: number;
    check?: ExtendedShapeStyle;
    box?: ExtendedShapeStyle;
    text?: ExtendedShapeStyle;
  };
  /** 播放时间类型切换器单一文本时的文本，默认为‘单一时间’ */
  readonly timePointControllerText?: string;
  /** 播放时间类型切换器单一文本时的文本，默认为‘时间范围’ */
  readonly timeRangeControllerText?: string;
  /** 时间播放类型默认值，不配置则为 'range' 即‘时间范围’ */
  readonly defaultTimeType?: "single" | "range";
}>;
interface TimeBarConfig {
  readonly x?: number;
  readonly y?: number;
  readonly width?: number;
  readonly height?: number;
  readonly padding?: number;
  readonly type?: TimeBarType;
  readonly trend?: TrendConfig;
  readonly slider?: SliderOption;
  readonly tick?: TimeBarSliceOption | TickCfg;
  readonly controllerCfg?: ControllerCfg;
  readonly filterEdge?: boolean;
  readonly filterItemTypes?: string[];
  readonly containerCSS?: Object;
  readonly changeData?: boolean;
  /** 是否置于图容器当中 */
  readonly putInGraphContainer?: boolean;
  rangeChange?: (graph: IGraph, minValue: string, maxValue: string) => void;
  getDate?: (d: any) => number;
  getValue?: (d: any) => number;
  shouldIgnore?: (
    itemType: "node" | "edge",
    model: any,
    dateRage: {
      min: number;
      max: number;
    }
  ) => boolean;
}