force-graph-vis/lib/types/options.d.ts

基于D3.js的知识图谱可视化解决方案

import { anyFunction, GraphDataNode, GraphDataLink } from './common';

export default interface GraphOptions {
  [key: string]: any;
  dom: string | HTMLDivElement; // 挂载的dom元素
  data?: { nodes: GraphDataNode[]; links: GraphDataLink[] }; // 图节点和边数据
  d3?: any; // d3
  key?: string; // 主键
  zoom?: number; // 默认缩放值
  scale?: number; // 业务逻辑使用的缩放值
  showHalo?: boolean; // 是否展示光晕
  enableZoom?: boolean; // 是否支持缩放
  enableHover?: boolean; // 是否支持hover高亮功能
  auto?: boolean; // 是否自动开始布局
  cloneData?: boolean; // 是否clone一遍数据
  renderer?: 'svg' | 'canvas'; // 渲染引擎
  width?: number; // 自定义渲染宽度
  height?: number; // 自定义渲染高度
  dragFixed?: boolean; //是否开启拖拽固定功能
  appendOpacity?: boolean; // 第一次创建元素时是否需要透明度
  showLinkArrow?: boolean; // 是否显示边箭头
  showLinkText?: boolean; // 是否显示边文字
  linkArrowPosition?: number; // 边箭头位置偏移
  linkArrowSize?: number; // 边箭头大小

  // simulation参数
  alpha?: number; // alpha起始值
  alphaMin?: number; // alpha停止值
  alphaDecay?: number; // alpha衰减系数
  alphaTarget?: number; // alpha目标值
  velocityDecay?: number; // 速度衰减系数

  // deprecated 钩子函数，使用事件替换
  // onClick?: anyFunction;
  // onDblClick?: anyFunction;
  // scaleSmall?: anyFunction;

  force?: {
    // simulator力配置
    [key: string]: any;
    center?: anyFunction; // 向心力
    collide?: anyFunction; // 碰撞力
    link?: anyFunction; // 弹簧力
    charge?: null; // 电荷力
    x?: null; // 定位力x
    y?: null; // 定位力y
    r?: null; // 环形力
  };

  pluginOptions?: {
    [key: string]: any;
    bezierCurveController?: {
      enable: boolean; // 是否启用控制点 controlPoints
    };
    occlusionDetection?: {
      enable: boolean; // 是否进行动态遮挡检测
    };
    colorPalette?: {
      randomNodeColor: boolean; // 是否随机节点颜色
      randomLinkColor: boolean; // 是否随机边颜色
    };
  };
}