笔记

Appearance

大纲

图的元素 - Edge ​

通用属性 ​

ts
interface EdgeStyle {
  stroke?: string // 边的颜色
  lineWidth?: number // 边的宽度
  lineAppendWidth?: number  // 边的检测宽度，用于提高鼠标事件命中范围
  endArrow?: boolean | Arrow // 可以自定义 `Arrow { path-路径, d-偏移量 }`
  startArrow?: boolean | Arrow // 可以自定义 `Arrow { path-路径, d-偏移量 }`
  strokeOpacity?: number // 边透明度
  shadowColor?: string
  shadowBlur?: number // 阴影范围
  shadowOffsetX?: number
  shadowOffsetY?: number
  lineDash?: number[] // [实线长度, 虚线长度]
  cursor? string  // 同 css cursor
}
interface Config {
  source?: string  // 起点 node id，若指定图类型或布局，可以省略
  target?: string  // 终点 noed id，若指定图类型或布局，可以省略
  id?: string      // 唯一
  type?: string   // 边类型，支持 内置 Edge 类型 或 自定义 Edge，默认 'line'
  sourceAnchor?: number // 起点 node 的锚点索引
  targetAnchor?: number // 终点 node 的锚点索引
  style?: EdgeStyle
  color?: string  // 优先级低于 `style.stroke`
  label? string,  // 文本
  labelCfg?: {
    refX?: number // label 在x轴偏移量
    refY?: number // label 在y轴偏移量
    position?: 'center' | 'top' | 'left' | 'right' | 'bottom' // 默认 'center'
    autoRotate?: boolean // 跟随边旋转，默认 false
    style?: LabelStyle // 参见 Shape 通用属性
  }
}

配置 Edge ​

js
// 配置默认 Edge，其配置内容会被 data 中数据替换
const graph = new G6.Graph({
  container: 'demo', width: 800, height: 600
  defaultEdge: { type: 'line', } // 默认 Edge，包含部分配置项
})

// 数据中进行配置, 优先级高于 `defaultEdge` 且配置项完整
const data = {
  nodes: [{ id: 'a' }, { id: 'b' }],
  edges: [{ source: 'a', target: 'b' }]
}
graph.data(data)

// 通过方法包装，优先级最高，将覆盖已有的 edge 配置
// 该方法需要在 `.render()` 之前调用；该方法在增加元素、更新元素时会被调用
graph.edge(edge => ({
  id: edge.id,
  type: 'polyline',
  // ...
}))
graph.render()

内置 Edge ​

类型名称controlPoints其他属性
line直线无无
polyline折线默认在线段拐点处style.radius、style.offset、routeCfg: RouteCfg
arc圆弧无curveOffset: number(可理解为弧度, 默认 20)
quadratic二次贝塞尔曲线默认在中点弯曲处curveOffset: number|number[]、curvePosition: number|number[]
cubic三次贝塞尔曲线默认在 1/3 和 2/3 弯曲处curveOffset: number|number[]、curvePosition: number|number[]、minCurveOffset: number|number[]
cubic-vertical三次贝塞尔曲线-垂直默认在 1/3 和 2/3 弯曲处curveOffset: number|number[]、curvePosition: number|number[]、minCurveOffset: number|number[]
cubic-horizontal三次贝塞尔曲线-水平默认在 1/3 和 2/3 弯曲处curveOffset: number|number[]、curvePosition: number|number[]、minCurveOffset: number|number[]
loop自环(起止点相同)无loopCfg: LoopCfg
ts
// 控制点，不指定时自动生成
type ControlPoints = { x: number; y: number }[];
// 路径配置，type 为 'polyline' 生效
interface RouteCfg {
  gridSize?: number; // 计算折现的网格大小， 默认 10
  maxAllowedDirectionChange?: number; // 允许的最大转角，默认 Math.Pi/2
  obstacles?: INode[]; // 需要躲避的障碍节点
}
// 自环配置，type 为 'loop' 生效
interface LoopCfg {
  position?:
    | "top"
    | "left"
    | "right"
    | "bottom"
    | "top-left"
    | "top-right"
    | "bottom-left"
    | "bottom-right"; // 自环相对节点的位置，默认 'top'
  dist?: number; // 自环的大小，默认为节点的高度
  clockwise?: boolean; // 顺时针，默认 true
  pointPaddiing?: number; // 偏移量，默认 节点宽高最小值/4
}

内置 Arrow ​

名称形状用法(示例为默认值)参数(顺序)
triangle三角{ path: G6.Arrow.triangle(10, 20, 0), d: 0 }箭头宽度、长度、偏移量
veeV 型{ path: G6.Arrow.vee(15, 20, 0), d: 0 }箭头宽度、长度、偏移量
circle原点{ path: G6.Arrow.triangle(5, 0), d: 0 }箭头半径、偏移量
diamond菱形{ path: G6.Arrow.diamond(15, 15, 0), d: 0 }箭头宽度、长度、偏移量
rect矩形{ path: G6.Arrow.rect(10, 10, 0), d: 0 }箭头宽度、长度、偏移量
triangleRect〡>{ path: G6.Arrow.triangle(15, 15, 15, 3, 5, 0), d: 0 }箭头三角宽度、三角长度、矩形宽度、矩形长度、间距、偏移量
ts
/**
 * `style.startArrow` 或 `style.endArrow` 指定为 `true` 时使用默认箭头及配置
 */
interface Arrow {
  /**
   * NOTE: 经测试,通过 `Arrow` 绘制时传入的偏移量是 `d` 的 2 倍(与文档相悖，疑似 bug)
   * `Arrow` 中偏移量的方向与 `d` 相反
   */
  path?: string; // 可通过内置 `Arrow` 进行绘制, 或传入自定义 `svg` 的 `path` 值；
  d?: number; // 偏移量
  stroke?: string;
  fill?: string;
  lineDash?: number[];
  strokeOpacity?: number;
  opacity?: number;
  fillOpacity?: number;
}