工具方法 Util

阅读时间约 3 分钟

F6 提供了一些工具方法,方便用户做数据的预处理、图形计算等。

使用方法

引入 F6 后,可通过 F6.Util.functionName 调用到 F6 抛出的工具方法。下面代码演示了使用 processParallelEdges 处理两节点之间存在多条边的情况。

import F6 from '@antv/f6';

const data = {
  nodes: [
    { id: '1' }, { id: '2' }
  ]
  edges: [
    { source: '1', target: '2' },
    { source: '1', target: '2' },
  ];
}

const offsetDiff = 10;
const multiEdgeType = 'quadratic';
const singleEdgeType = 'line';
const loopEdgeType = 'loop';
F6.Util.processParallelEdges(data.edges, offsetDiff, multiEdgeType, singleEdgeType, loopEdgeType);

数据预处理

processParallelEdges 处理平行边

若两条边的两个端点相同,则称这两条边相互平行。当一对节点节点之间存在多条边,不做处理直接绘制可能会导致边相互重叠。该 Util 方法将找到数据中的平行边,为它们计算合理的贝塞尔曲线控制点偏移量 curveOffset,挂载到相应的边数据上,使得平行边在渲染时可以根据 curveOffset 绘制贝塞尔曲线,从而不相互重叠。因此该方法适用于将平行边处理为 quadratic 或基于 quadratic 自定义的边类型。

img

配置项

名称类型是否必须描述
edgesEdgeConfig[]true需要处理的边数据数组
offsetDiffnumberfalse两条平行边的之间的距离,默认为 15
multiEdgeTypestringfalse两节点之间若存在多条边时,这些边的类型,默认为 'quadratic'
singleEdgeTypestringfalse两节点之间仅有一条边时,该边的类型,默认为 undefined,即不改变这种边的类型
loopEdgeTypestringfalse若一条边的起点和终点是同一个节点(自环边),该边的类型,默认为 undefined,即不改变这种边的类型

使用示例

Demo

traverseTree 深度优先遍历树数据

从根节点到叶子节点的由上至下的深度优先遍历树数据。

配置项

名称类型是否必须描述
dataTreeDatatrue需要遍历的树数据
fnfunctiontrue遍历到每个节点时的回调函数

使用示例

const treeData = {
  id: '1',
  children: [
    {
      id: '2',
      children: [{ id: '3' }, { id: '4' }],
    },
    {
      id: '5',
      children: [
        { id: '6' },
        {
          id: '7',
          children: [{ id: '8' }, { id: '9' }],
        },
      ],
    },
    {
      id: '10',
      children: [{ id: '11' }],
    },
  ],
};

traverseTree(treeData, (subTree) => {
  subTree.color = '#f00';
  return true;
});

traverseTreeUp 深度优先遍历树数据

从叶子节点到根节点的由下至上的深度优先遍历树数据。

配置项

名称类型是否必须描述
dataTreeDatatrue需要遍历的树数据
fnfunctiontrue遍历到每个节点时的回调函数

使用示例

const treeData = {
  id: '1',
  children: [
    {
      id: '2',
      children: [{ id: '3' }, { id: '4' }],
    },
    {
      id: '5',
      children: [
        { id: '6' },
        {
          id: '7',
          children: [{ id: '8' }, { id: '9' }],
        },
      ],
    },
    {
      id: '10',
      children: [{ id: '11' }],
    },
  ],
};

traverseTreeUp(treeData, (subTree) => {
  subTree.color = '#f00';
  return true;
});

包围盒计算

calculationItemsBBox 一组节点的总包围盒

名称类型是否必须描述
itemsItem[]true节点数组