Quadratic

阅读时间约 2 分钟

F6 内置了 quadratic 边，其默认样式如下。

使用方法

如内置边一节所示，配置边的方式有三种：实例化图时全局配置，在数据中动态配置，使用 graph.edge(edgeFn) 函数配置。这几种配置方法可以同时使用，优先级：

使用 graph.edge(edgeFn) 配置 > 数据中动态配置 > 实例化图时全局配置

⚠️ 注意: 除 id、source、target、label 应当配置到每条边数据中外，其余的边的通用属性以及各个边类型的特有属性（见内置边类型）均支持三种配置方式。

1 实例化图时全局配置

用户在实例化 Graph 时候可以通过 defaultEdge 指定 type 为 'quadratic'，即可使用 quadratic 边。

const graph = new F6.Graph({
  ...
  width: 800,
  height: 600,
  defaultEdge: {
    type: 'quadratic',
    // 其他配置
  },
});

2 在数据中动态配置

如果需要使不同节点有不同的配置，可以将配置写入到节点数据中。这种配置方式可以通过下面代码的形式直接写入数据，也可以通过遍历数据的方式写入。

const data = {
  nodes: [
    ... // 节点
  ],
  edges: [{
    source: 'node0',
    target: 'node1'
    type: 'quadratic',
    ... // 其他配置
    style: {
      ...  // 样式属性，每种边的详细样式属性参见各边文档
    }
  },
    ... // 其他边
  ]
}

配置项说明

quadratic 边支持边通用配置项，以下表格对部分常用配置项进行说明。对于 Object 类型的配置项将在后面有详细讲解：

名称	含义	类型	备注
color	边的颜色	String	优先级低于 style 中的 stroke
style	边的样式	Object	Canvas 支持的属性
label	标签文本文字	String
labelCfg	标签文本配置项	Object
controlPoints	控制点数组	Array	不指定时将会使用默认的控制点：曲线中心附近。示例：`[{ x: 10, y: 20 }]`
curveOffset	控制点距离两端点连线的距离，可理解为控制边的弯曲程度	Number / Number[]	cubic、horizontal、cubic-vertical、cubic-horizontal 等贝塞尔曲线特有
curvePosition	控制点在两端点连线上的相对位置，范围 0 ～ 1	Number / Number[]	cubic、horizontal、cubic-vertical、cubic-horizontal 等贝塞尔曲线特有
stateStyles	各状态下的样式	Object	详见配置状态样式

样式属性 style

Object 类型。配置项与边通用样式属性相同。下面代码演示在实例化图时全局配置方法中配置 style。

const data = {
  nodes: [
    {
      id: 'node0',
      x: 100,
      y: 100,
      size: 20,
    },
    {
      id: 'node1',
      x: 200,
      y: 100,
      size: 20,
    },
  ],
  edges: [
    {
      source: 'node0',
      target: 'node1',
      type: 'quadratic',
      label: 'quadratic',
    },
  ],
};
const graph = new F6.Graph({
  ...
  width: 800,
  height: 600,
  defaultEdge: {
    // type: 'quadratic',  // 在数据中已经指定 type，这里无需再次指定
    style: {
      stroke: '#088',
      endArrow: true,
      lineWidth: 3,
    },
  },
});
graph.data(data);
graph.render();

标签文本配置 labelCfg

Object 类型。支持边通用标签配置。基于上面样式属性 style 中的代码，下面代码在 defaultEdge 中增加了 labelCfg 配置项进行文本的配置，使之达到如下图效果。

const data = {
  // ... data 内容
};
const graph = new F6.Graph({
  // ... 图的其他配置
  defaultEdge: {
    // ... 其他配置
    labelCfg: {
      refY: 10,
      refX: 40,
    },
  },
});
// ...