使用组件

阅读时间约 43 分钟

G6 中支持插件提供了一些可插拔的组件,包括:

配置方法

引入 G6 后,首先实例化需要使用的某插件对象。然后,在实例化图时将其配置到 plugins 中:

// 实例化 Grid 插件
const grid = new G6.Grid();
const minimap = new G6.Minimap();
const graph = new G6.Graph({
  //... 其他配置项
  plugins: [grid, minimap], // 配置 Grid 插件和 Minimap 插件
});

Legend

Legend 是 G6 内置的图例插件。用于说明图中不同类型的节点和边所代表的含义,并可以通过与图例的交互做简单的高亮和过滤。 v4.3.0 起支持

img

配置项

名称类型描述
dataGraphData图例的数据,与图数据格式相同。节点图例目前支持 'circle''rect',和 'ellipse',边图例目前支持 'line''cubic''quadratic'。通过指定每个数据项中的 type 字段以确定图例元素的类型,每个数据项中的 order 字段可用于同组图例的排序
position'top' / 'top-left' / 'top-right' / 'right' / 'right-top' / 'right-bottom' / 'left' / 'left-top' / 'left-bottom' / 'bottom' / 'bottom-left' / 'bottom-right'图例在画布中的相对位置,默认为 'top',代表在画布正上方
paddingnumber / number[]图例区域内部内容到边框的距离,四位数组分别代表上、右、下、左边距
marginnumber / number[]图例区域与画布边界的距离,四位数组分别代表上、右、下、左边距。在 position:'top' 时只有上边距生效,其他情况类似
offsetXnumber图例区域离 position 对应的默认位置的 x 方向的偏移量,可被用于图例位置的微调
offsetYnumber图例区域离 position 对应的默认位置的 y 方向的偏移量,可被用于图例位置的微调
containerStyleShapeStyle图例背景框的样式,格式与 rect 图形的样式相同
horiSepnumber图例之间的水平间距
vertiSepnumber图例之间的竖直间距
layout'vertical' / 'horizontal'图例的布局方式。默认为 'horizontal' 横向布局
align'center' / 'right' / 'left'图例的对齐方式,可以是居中、右对齐、左对齐。默认为 'center' 居中
titlestring图例的标题文本内容,样式通过 titleConfig 设置
titleConfigobject图例标题的样式,具体配置项如下
titleConfig.position'center' / 'right' / 'left'图例标题的对齐方式,可以是居中、右对齐、左对齐。默认为 'center' 居中
titleConfig.offsetXnumber图例标题的 x 方向偏移,用于微调标题位置
titleConfig.offsetYnumber图例标题的 y 方向偏移,用于微调标题位置
titleConfig[key]ShapeStyle其他对于文本本身的样式,支持的内容与 text 图形的样式相同
filterobject通过图例的交互对主图元素进行过滤的配置项,具体配置如下
filter.enableboolean是否允许通过图例的交互对主图元素过滤,默认为 false
filter.multipleboolean是否支持多种元素过滤,默认为 false,只有 filter.trigger'click' 时方可多选图例
filter.trigger'click' / 'mouseenter'触发主图元素过滤的图例交互方式,默认为 click
filter.legendStateStyles{ active?: ShapeStyle, inactive?: ShapeStyle在过滤时,图例本身的状态样式,包括 filter.legendStateStyles.activefilter.legendStateStyles.inactive 两种,每种的类型均为 ShapeStyle。类似图的 nodeStateStyles 配置
filter.graphActiveStatestring主图元素过滤时,被选中的主图元素的状态名,将寻找主图元素的对应的状态样式进行主图元素的更新。默认值为 'active'
filter.graphInactiveStatestring主图元素过滤时,未被选中的主图元素的状态名,将寻找主图元素的对应的状态样式进行主图元素的更新。默认值为 'inactive'
filter.filterFunctions{ [key: string]: (d) => boolean; }由于图例的数据与主图解耦,因此需要配置每种图例对应的主图过滤函数,key 为图例数据的 type,值为函数,函数的参数为主图元素的数据,返回值为布尔型,代表是否被选中

SnapLine

SnapLine 是 G6 内置的对齐线插件。 v4.3.0 起支持

实例化时可以通过配置项调整 SnapLine 的样式和功能。

配置项

名称类型描述
lineShapeStyle辅助线的样式
itemAlignTypeboolean、'horizontal' 、'vertical'、'center';辅助线类型,true 表示全部

Grid

Grid 插件在画布上绘制了网格。

img

使用 配置方法 中代码实例化时可以通过配置项调整 Grid 的图片。

配置项

名称类型描述
imgStringgrid 图片,base64 格式字符串

Minimap

Minimap 是用于快速预览和探索图的工具。

img

实例化时可以通过配置项调整 Minimap 的样式和功能。

配置项

名称类型描述
containerObject放置 Minimap 的 DOM 容器。若不指定则自动生成
classNameString生成的 DOM 元素的 className
viewportClassNameStringMinimap 上视窗 DOM 元素的 className
typeString选项:'default':渲染图上所有图形;'keyShape':只渲染图上元素的 keyShape,以减少渲染成本;'delegate':只渲染图上元素的大致图形,以降低渲染成本。渲染成本 'default' > 'keyShape' > 'delegate'。默认为 'default'
sizeArrayMinimap 的大小
delegateStyleObjecttype'delegate' 时生效,代表元素大致图形的样式

其中,delegateStyle 可以设置如下属性:

名称类型描述
fillString填充颜色
strokeString描边颜色
lineWidthNumber描边宽度
opacityNumber透明度
fillOpacityNumber填充透明度

Image Minimap

由于 Minimap 的原理是将主画布内容复制到 minimap 的画布上,在大数据量下可能会造成双倍的绘制效率成本。为缓解该问题,Image Minimap 采用另一种机制,根据提供的图片地址或 base64 字符串 graphImg 绘制 <img /> 代替 minimap 上的 canvas。该方法可以大大减轻两倍 canvas 绘制的压力。但 graphImg 完全交由 G6 的用户控制,需要注意主画布更新时需要使用 updateGraphImg 方法替换 graphImg

img

实例化时可以通过配置项调整 Image inimap 的样式和功能。

配置项

名称类型是否必须描述
graphImgStringtrueminimap 的图片地址或 base64 文本
widthNumberfalseminimap 的宽度。Image Minimap 的长宽比一定等于主图长宽比。因此,若设置了 width,则按照主画布容器长宽比确定 height,也就是说,width 的优先级高于 height
heightNumberfalseminimap 的高度。Image Minimap 的长宽比一定等于主图长宽比。若未设置了 width,但设置了 height,则按照主画布容器长宽比确定 width;若设置了 width 则以 width 为准
containerObjectfalse放置 Minimap 的 DOM 容器。若不指定则自动生成
classNameStringfalse生成的 DOM 元素的 className
viewportClassNameStringfalseMinimap 上视窗 DOM 元素的 className
delegateStyleObjectfalsetype'delegate' 时生效,代表元素大致图形的样式

其中,delegateStyle 可以设置如下属性:

名称类型描述
fillString填充颜色
strokeString描边颜色
lineWidthNumber描边宽度
opacityNumber透明度
fillOpacityNumber填充透明度

API

updateGraphImg(img)

更新 minimap 图片。建议在主画布更新时使用该方法同步更新 minimap 图片。

参数:

名称类型是否必须描述
imgStringtrueminimap 的图片地址或 base64 文本

用法

实例化 Image Minimap 插件时,graphImg 是必要参数。

// 实例化 Image Minimap 插件
const imageMinimap = new G6.ImageMinimap({
  width: 200,
  graphImg: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eD7nT6tmYgAAAAAAAAAAAABkARQnAQ'
});
const graph = new G6.Graph({
  //... 其他配置项
  plugins: [imageMinimap], // 配置 imageMinimap 插件
});

graph.data(data);
graph.render()

... // 一些主画布更新操作
imageMinimap.updateGraphImg(img); // 使用新的图片(用户自己生成)替换 minimap 图片

Edge Bundling

在关系复杂、繁多的大规模图上,通过边绑定可以降低视觉复杂度。

img
美国航线图边绑定。Demo 链接。该 Demo 教程

实例化时可以通过配置项调整边绑定的功能。

配置项

名称类型默认值描述
KNumber0.1边绑定的强度
lambdaNumber0.1算法的初始步长
divisionsNumber1初始的切割点数,即每条边将会被切割成的份数。每次迭代将会被乘以 divRate
divRateNumber2切割增长率,每次迭代都会乘以该数字。数字越大,绑定越平滑,但计算量将增大
cyclesNumber6迭代次数
iterationsNumber90初始的内迭代次数,每次外迭代中将会被乘以 iterRate
iterRateNumber0.6666667迭代下降率
bundleThresholdNumber0.6判定边是否应该绑定在一起的相似容忍度,数值越大,被绑在一起的边相似度越低,数量越多

Menu 用于配置节点上的右键菜单。

配置项

名称类型默认值描述
classNamestringnullmenu 容器的 class 类名
getContent(evt?: IG6GraphEvent, graph?: IGraph) => HTMLDivElement / stringimg菜单项内容,支持 DOM 元素或字符串
handleMenuClick(target: HTMLElement, item: Item, graph?: IGraph) => voidundefined点击菜单项的回调函数
shouldBegin(evt: G6Event) => booleanundefined是否允许 menu 出现,可以根据 evt.item(当前鼠标事件中的元素) 或 evt.target(当前鼠标事件中的图形)的内容判断此时是否允许 menu 出现
offsetXnumber6menu 的 x 方向偏移值,需要考虑父级容器的 padding
offsetYnumber6menu 的 y 方向偏移值,需要考虑父级容器的 padding
itemTypesstring[]['node', 'edge', 'combo']menu 作用在哪些类型的元素上,若只想在节点上显示,可将其设置为 ['node']
trigger'click' / 'contextmenu''contextmenu'menu 出现的触发方式,默认为 'contextmenu',即右击。'click' 代表左击。v4.3.2 起支持 'click'

用法

实例化 Menu 插件时,如果不传参数,则使用 G6 默认提供的值,只能展示默认的菜单项,不能进行任何操作。

// 实例化 Menu 插件
const menu = new G6.Menu();
const graph = new G6.Graph({
  //... 其他配置项
  plugins: [menu], // 配置 Menu 插件
});

DOM Menu

const menu = new G6.Menu({
  offsetX: 6,
  offsetX: 10,
  itemTypes: ['node'],
  getContent(e, graph) {
    const outDiv = document.createElement('div');
    outDiv.style.width = '180px';
    outDiv.innerHTML = `<ul>
        <li>测试01</li>
        <li>测试01</li>
        <li>测试01</li>
        <li>测试01</li>
        <li>测试01</li>
      </ul>`
    return outDiv
  },
  handleMenuClick(target, item, graph) {
    console.log(target, item, graph)
  },
});

const graph = new G6.Graph({
  //... 其他配置项
  plugins: [menu], // 配置 Menu 插件
});

String Menu

const menu = new G6.Menu({
  getContent(evt) {
    return `<ul>
      <li title='1'>测试02</li>
      <li title='2'>测试02</li>
      <li>测试02</li>
      <li>测试02</li>
      <li>测试02</li>
    </ul>`;
  },
  handleMenuClick(target, item) {
    console.log(target, item)
  },
});

const graph = new G6.Graph({
  //... 其他配置项
  plugins: [menu], // 配置 Menu 插件
});

ToolBar

ToolBar 集成了以下常见的操作:

  • 重做;
  • 撤销;
  • 放大;
  • 缩小;
  • 适应屏幕;
  • 实际大小。

配置项

名称类型默认值描述
containerHTMLDivElementnullToolBar 容器,如果不设置,则默认使用 canvas 的 DOM 容器
classNamestringnullToolBar 内容元素的 class 类名
getContent(graph?: IGraph) => HTMLDivElementstringimgToolBar 内容,支持 DOM 元素或字符串
handleClick(code: string, graph: IGraph) => voidundefined点击 ToolBar 中每个图标的回调函数
positionPointnullToolBar 的位置坐标

用法

默认用法

默认的 ToolBar 提供了撤销、重做、放大等功能。

const toolbar = new G6.ToolBar();

const graph = new G6.Graph({
  //... 其他配置项
  plugins: [toolbar], // 配置 ToolBar 插件
});

使用 String 自定义 ToolBar 功能

const tc = document.createElement('div');
tc.id = 'toolbarContainer';
document.body.appendChild(tc);

const toolbar = new G6.ToolBar({
  container: tc,
  getContent: () => {
    return `
      <ul>
        <li code='add'>增加节点</li>
        <li code='undo'>撤销</li>
      </ul>
    `
  },
  handleClick: (code, graph) => {
    if (code === 'add') {
      graph.addItem('node', {
        id: 'node2',
        label: 'node2',
        x: 300,
        y: 150
      })
    } else if (code === 'undo') {
      toolbar.undo()
    }
  }
});

const graph = new G6.Graph({
  //... 其他配置项
  plugins: [toolbar], // 配置 ToolBar 插件
});

使用 DOM 自定义 ToolBar 功能

const toolbar = new G6.ToolBar({
  getContent: () => {
    const outDiv = document.createElement('div');
    outDiv.style.width = '180px';
    outDiv.innerHTML = `<ul>
        <li>测试01</li>
        <li>测试02</li>
        <li>测试03</li>
        <li>测试04</li>
        <li>测试05</li>
      </ul>`
    return outDiv
  },
  handleClick: (code, graph) => {

  }
});

const graph = new G6.Graph({
  //... 其他配置项
  plugins: [toolbar], // 配置 ToolBar 插件
});

ToolTip

ToolTip 插件主要用于在节点和边上展示一些辅助信息,G6 4.0 以后,Tooltip 插件将会替换 Behavior 中的 tooltip。

配置项

名称类型默认值描述
classNamestringnulltooltip 容器的 class 类名
containerHTMLDivElementnullTooltip 容器,如果不设置,则默认使用 canvas 的 DOM 容器
getContent(evt?: IG6GraphEvent) => HTMLDivElement / stringimgtooltip 内容,支持 DOM 元素或字符串
shouldBegin(evt: G6Event) => booleanundefined是否允许 tooltip 出现,可以根据 evt.item(当前鼠标事件中的元素) 或 evt.target(当前鼠标事件中的图形)的内容判断此时是否允许 tooltip 出现
offsetXnumber6tooltip 的 x 方向偏移值,需要考虑父级容器的 padding
offsetYnumber6tooltip 的 y 方向偏移值,需要考虑父级容器的 padding
itemTypesstring[]['node', 'edge', 'combo']tooltip 作用在哪些类型的元素上,若只想在节点上显示,可将其设置为 ['node']

用法

默认的 Tooltip 只展示元素类型和 ID,一般情况下都需要用户自己定义 Tooltip 上面展示的内容。

Dom Tooltip

const tooltip = new G6.Tooltip({
  offsetX: 10,
  offsetY: 20,
  getContent(e) {
    const outDiv = document.createElement('div');
    outDiv.style.width = '180px';
    outDiv.innerHTML = `
      <h4>自定义tooltip</h4>
      <ul>
        <li>Label: ${e.item.getModel().label || e.item.getModel().id}</li>
      </ul>`
    return outDiv
  },
  itemTypes: ['node']
});

const graph = new G6.Graph({
  //... 其他配置项
  plugins: [tooltip], // 配置 Tooltip 插件
});

String Tooltip

const tooltip = new G6.Tooltip({
  getContent(e) {
    return `<div style='width: 180px;'>
      <ul id='menu'>
        <li title='1'>测试02</li>
        <li title='2'>测试02</li>
        <li>测试02</li>
        <li>测试02</li>
        <li>测试02</li>
      </ul>
    </div>`;
  },
});

const graph = new G6.Graph({
  //... 其他配置项
  plugins: [tooltip], // 配置 Tooltip 插件
});

Fisheye

Fisheye 鱼眼放大镜是为 focus+context 的探索场景设计的,它能够保证在放大关注区域的同时,保证上下文以及上下文与关注中心的关系不丢失。

配置项

名称类型默认值描述
trigger'mousemove' / 'click' / 'drag''mousemove'放大镜的触发事件
dNumber1.5放大系数,数值越大,放大程度越大
rNumber300放大区域的范围半径
delegateStyleObject{ stroke: '#000', strokeOpacity: 0.8, lineWidth: 2, fillOpacity: 0.1, fill: '#ccc' }放大镜蒙层样式
showLabelBooleanfalse若 label 默认被隐藏,是否在关注区域内展示 label
maxRNumber图的高度滚轮调整缩放范围的最大半径
minRNumber0.05 * 图的高度滚轮调整缩放范围的最小半径
maxDNumber5trigger'mousemove' / 'click' 时,可以在放大镜上左右拖拽调整缩放系数。maxD 指定了这种调整方式的最大缩放系数,建议取值范围 [0, 5]。若使用 minimap.updateParam 更新参数不受该系数限制
minDNumber0trigger'mousemove' / 'click' 时,可以在放大镜上左右拖拽调整缩放系数。maxD 指定了这种调整方式的最小缩放系数,建议取值范围 [0, 5]。若使用 minimap.updateParam 更新参数不受该系数限制
scaleRBy'wheel'/'drag'/'unset'/undefinedfalse'unset'终端用户调整放大镜范围大小的方式
scaleDBy'wheel'/'drag'/'unset'/undefinedfalse'unset'终端用户调整放大镜缩放系数的方式
showDPercentBooleanfalsetrue是否在放大镜下方显示当前缩放系数的比例值(与 minD、maxD 相较)

成员函数

updateParams(cfg)

用于更新该 FishEye 的部分配置项,包括 triggerdrmaxRminRmaxDminDscaleRByscaleDBy。例如:

const fisheye = new G6.Fisheye({
  trigger: 'mousemove'
});

... // 其他操作

fisheye.updateParams({
  d: 2,
  r: 500,
  // ...
})

用法

const fisheye = new G6.Fisheye({
  trigger: 'mousemove',
  d: 1.5,
  r: 300,
  delegateStyle: clone(lensDelegateStyle),
  showLabel: false
});

const graph = new G6.Graph({
  //... 其他配置项
  plugins: [fisheye], // 配置 fisheye 插件
});

Edge Filter Lens

EdgeFilterLens 边过滤镜可以将关注的边保留在过滤镜范围内,其他边将在该范围内不显示。

配置项

名称类型默认值描述
trigger'drag' / 'mousemove' / 'click''mousemove'过滤镜的触发事件
type'one' / 'both' / 'only-source' / 'only-target''both'根据边两端点作为边过滤的简单条件。'one':边至少有一个端点在过滤镜区域内,则在该区域内显示该边;'both':两个端点都在过滤区域内,则在该区域显示该边;'only-source':只有起始端在过滤镜区域内,则在该区域显示该边;'only-target':只有结束端在过滤区域内,则在该区域显示该边。更复杂的条件可以使用 shouldShow 指定
shouldShow(d?: unknown) => booleanundefined边过滤的自定义条件。参数 d 为边每条边的数据,用户可以根据边的参数返回布尔值。返回 true 代表该边需要在过滤镜区域内显示,false 反之。
rNumber60过滤镜的范围半径
delegateStyleObject{ stroke: '#000', strokeOpacity: 0.8, lineWidth: 2, fillOpacity: 0.1, fill: '#ccc' }过滤镜蒙层样式
showLabel'edge' / 'node' / 'both''edge'若 label 默认被隐藏,是否在关注区域内展示对应元素类型的 label。'both' 代表节点和边的 label 都在过滤镜区域显示
maxRNumber图的高度滚轮调整过滤镜的最大半径
minRNumber0.05 * 图的高度滚轮调整过滤镜的最小半径
scaleRBy'wheel' / undefined'wheel'终端用户调整过滤镜大小的方式,undefined 代表不允许终端用户调整

成员函数

updateParams(cfg)

用于更新该过滤镜的部分配置项,包括 triggertypermaxRminRscaleRByshowLabelshouldShow。例如:

const filterLens = new G6.EdgeFilterLens({
  trigger: 'drag'
});

... // 其他操作

filterLens.updateParams({
  r: 500,
  // ...
})

用法

const filterLens = new G6.EdgeFilterLens({
  trigger: 'mousemove',
  r: 300,
  shouldShow: d => {
    return d.size > 10;
  }
});

const graph = new G6.Graph({
  //... 其他配置项
  plugins: [filterLens], // 配置 filterLens 插件
});

TimeBar

AntV G6 内置了三种形态的 TimeBar 组件:

  • 带有趋势图的 TimeBar 组件;
  • 简易版的 TimeBar 组件;
  • 刻度 TimeBar 组件。

并且每种类型的 TimeBar 组件都可以配合播放、快进、后退等控制按钮组使用。


趋势图 TimeBar 组件

简易版 TimeBar 组件

刻度 TimeBar 组件


在趋势图 TimeBar 基础上,我们可以通过配置数据,实现更加复杂的趋势图 TimeBar 组件,如下图所示。


虽然 G6 提供了各种不同类型的 TimeBar 组件,但在使用的方式却非常简单,通过配置字段就可以进行区分。

关于 TimeBar 的使用案例,请参考这里

使用 TimeBar 组件

使用 G6 内置的 TimeBar 组件,和使用其他组件的方式完全相同。

import G6 from '@antv/g6';

const timebar = new G6.TimeBar({
  width: 500,
  height: 150,
  padding: 10,
  type: 'trend',
  trend: {
    data: timeBarData,
  },
});

const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  plugins: [timebar],
});


通过上面的方式,我们就可以在图中使用 TimeBar 组件了,当实例化 TimeBar 时,type 参数值为 trend,表示我们实例化的是趋势图组件,效果如下图所示。


当设置 type 为 simple 时,就可以使用简易版的 TimeBar。


当设置 type 为 tick 时,表示我们要使用刻度 TimeBar 组件,但此时要注意的是,刻度时间轴的配置项是通过 tick 对象配置而不是 trend 对象,这也是刻度时间轴和趋势即简易时间轴不同的地方。

const timebar = new G6.TimeBar({
  width,
  height: 150,
  type: 'tick',
  tick: {
    data: timeBarData,
    width,
    height: 42,
    tickLabelFormatter: (d) => {
      const dateStr = `${d.date}`;
      if ((count - 1) % 10 === 0) {
        return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`;
      }
      return false;
    },
    tooltipFomatter: (d) => {
      const dateStr = `${d}`;
      return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`;
    },
  },
});

事件监听

TimeBar 插件暴露除了几个时机事件,方便用户监听内部状态的变化。以下事件可通过 graph.on('eventname', e => {}) 进行监听。

事件名称描述
valuechange时间轴的时间范围发生变化时触发
timebarstartplay时间轴开始播放时触发
timebarendplay时间轴播放结束时触发

参数定义

接口定义

完整的 TimeBar 的接口定义如下:

interface TimeBarConfig extends IPluginBaseConfig {
  // position size
  readonly x?: number;
  readonly y?: number;
  readonly width?: number;
  readonly height?: number;
  readonly padding?: number;

  readonly type?: 'trend' | 'simple' | 'tick';
  // 趋势图配置项
  readonly trend?: TrendConfig;
  // 滑块、及前后背景的配置
  readonly slider?: SliderOption;

  // 当 type 是 tick 时,这是 tick 类型时间轴的配置项
  // 当 type 是 trend 或 simple 时,这是时间轴下方时间刻度文本的配置项
  readonly tick?: TimeBarSliceOption | TickCfg;

  // 控制按钮
  readonly controllerCfg?: ControllerCfg;

  // [v4.5.1 起支持] 容器的 CSS 样式
  readonly containerCSS?: Object;

  // [v4.5.1 起支持] 过滤的类型, ['node', 'edge'], 默认为 ['node']
  readonly filterItemTypes?: string[];

  // [v4.5.1 起废弃,由 filterItemTypes 代替] 是否过滤边,若为 true,则需要配合边数据上有 date 字段,过滤节点同时将不满足 date 在选中范围内的边也过滤出去;若为 false,则仅过滤节点以及两端节点都被过滤出去的边
  readonly filterEdge?: boolean;

  // [v4.5.1 起支持] 是否通过 graph.changeData 改变图上数据从而达到筛选目的。若为 false 则将使用 graph.hideItem 和 graph.showItem 以隐藏/展示图上元素从而达到筛选目的
  readonly changeData?: boolean;

  // TimeBar 时间范围变化时的回调函数,当不定义该函数时,时间范围变化时默认过滤图上的数据
  rangeChange?: (graph: IGraph, minValue: string, maxValue: string) => void;

  // [v4.5.1 起支持] 用户根据节点/边数据返回对应时间值的方法
  getDate?: (d: any) => number;

  // [v4.5.1 起支持] 用户根据节点/边数据返回对应 value 的方法。value 用于在 type 为 trend 的时间轴上显示趋势线
  getValue?: (d: any) => number;

  // [v4.5.1 起支持] 在过滤图元素时是否要忽略某些元素。返回 true,则忽略。否则按照正常过滤逻辑处理
  shouldIgnore?: (itemType: 'node' | 'edge', model: any, dateRage: { min: number, max: number }) => boolean;
}

接口参数说明

名称类型默认值描述
containerHTMLDivElementnullTimeBar 容器,如果不设置,则默认创建 className 为 g6-component-timebar 的 DOM 容器
xnumber0TimeBar 开始 x 坐标
ynumber0TimeBar 开始 y 坐标
widthnumber必选,TimeBar 容器宽度
heightnumber必选,TimeBar 高度
paddingnumber/number[]10TimeBar 距离容器的间距值
type'trend' / 'simple' / 'tick'trend默认的 TimeBar 类型,默认为趋势图样式
trendTrendConfignullTimebar 中趋势图的配置项,当 type 为 trend 或 simple 时,该字段必选
sliderSliderOptionnullTimeBar 组件背景及控制调节范围的滑块的配置项
tickTimeBarSliceOption / TickCfgnull当 type 是 tick 时,这是 tick 类型时间轴的配置项,该字段必须按;当 type 是 trend 或 simple 时,这是时间轴下方时间刻度文本的配置项
controllerCfgControllerCfgnull控制按钮组配置项
containerCSSObjectnull[v4.5.1 起支持] 容器的 CSS 样式
filterItemTypesstring[]null[v4.5.1 起支持] 过滤的类型, ['node', 'edge'], 默认为 ['node']
filterEdgebooleanfalse[v4.5.1 起废弃,由 filterItemTypes 代替] 是否过滤边,若为 true,则需要配合边数据上有 date 字段,过滤节点同时将不满足 date 在选中范围内的边也过滤出去;若为 false,则仅过滤节点以及两端节点都被过滤出去的边
changeDatabooleannull[v4.5.1 起支持] 是否通过 graph.changeData 改变图上数据从而达到筛选目的。若为 false 则将使用 graph.hideItem 和 graph.showItem 以隐藏/展示图上元素从而达到筛选目的
rangeChangeFunctionnullTimeBar 时间范围变化时的回调函数,当不定义该函数时,时间范围变化时默认过滤图上的数据
getDate(d: any) => numbernull[v4.5.1 起支持] 用户根据节点/边数据返回对应时间值的方法
getValue(d: any) => numbernull[v4.5.1 起支持] 用户根据节点/边数据返回对应 value 的方法。value 用于在 type 为 trend 的时间轴上显示趋势线
shouldIgnore(itemType: 'node''edge', model: any, dateRage: { min: number, max: number }) => booleannull

TrendConfig 接口定义

暂不支持刻度文本的样式配置

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;
}

TrendConfig 参数说明

名称类型默认值描述
xnumber0趋势图开始 x 坐标
ynumber0趋势图开始 y 坐标
widthnumberTimeBar 容器宽度TimeBar 趋势图宽度,不建议自己设定,如果设定时需要同步设置 slider 中的 width 值
heightnumbertype=trend:默认为 28
type=simple:默认为 8
TimeBar 趋势图高度,不建议自己设定,如果设定时需要同步设置 slider 中的 height 值
smoothbooleanfalse是否是平滑的曲线
isAreabooleanfalse是否显示面积图
lineStyleShapeStylenull折线的样式配置
areaStyleShapeStylenull面积的样式配置项,只有当 isArea 为 true 时生效
intervalIntervalnull柱状图配置项,当配置了该项后,趋势图上会展现为混合图样式。Interval = { data: number[], style: ShapeStyle }styleShapeStyle 类型中图形的样式外,还可配置 barWidth 配置柱状图柱子的宽度。

SliderOption 接口定义

export 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;
}>;

SliderOption 参数说明

名称类型默认值描述
widthnumberTimeBar 容器宽度 - 2 * padding趋势图背景框宽度,不建议自己设定,如果设定时要同步修改 trend 中 width 值
heightnumber趋势图默认为 28
简易版默认为 8
TimeBar 趋势图高度,不建议自己设定,如果设定时需要同步设置 trend 中的 height 值
backgroundStyleShapeStylenull背景样式配置项
foregroundStyleShapeStylenull前景色样式配置,即选中范围的样式配置项
handlerStyleShapeStylenull滑块的样式配置项
textStyleShapeStylenull滑块上文本的样式配置项
startnumber0.1开始位置
endnumber0.9结束位置
minTextstringmin最小值文本
maxTextstringmax最大值文本

TimeBarSliceOption

export interface TimeBarSliceOption {
  // position size
  readonly x?: number;
  readonly y?: number;
  readonly width?: number;
  readonly height?: number;
  readonly padding?: number;

  // styles
  readonly selectedTickStyle?: TickStyle;
  readonly unselectedTickStyle?: TickStyle
  readonly tooltipBackgroundColor?: string;

  readonly start?: number;
  readonly end?: number;

  // 数据
  readonly data: {
    date: string;
    value: string;
  }[];

  // 自定义标签格式化函数
  readonly tickLabelFormatter?: (d: any) => string | boolean;
  // 自定义 tooltip 内容格式化函数
  readonly tooltipFomatter?: (d: any) => string;
}

TimeBarSliceOption 参数说明

名称类型默认值描述
xnumber0刻度 TimeBar 开始 x 坐标
ynumber0刻度 TimeBar 开始 y 坐标
widthnumber必选,刻度 TimeBar 宽度
heightnumber必选,刻度 TimeBar 高度
paddingnumber / number[]0刻度 TimeBar 距离边界的间距
selectedTickStyleShapeStylenull选中刻度的样式配置项
unselectedTickStyleShapeStylenull未选中刻度的样式配置项
tooltipBackgroundColorShapeStylenulltooltip 背景框配置项
startnumber0.1开始位置
endnumber0.9结束位置
dataany[][]必选,刻度时间轴的刻度数据
tickLabelFormatterFunctionnull刻度的格式化回调函数
tooltipFomatterFunctionnulltooltip 上内容格式化的回调函数

TickCfg 接口定义

export interface TickCfg {
  // 时间轴下方文本的格式化函数
  readonly tickLabelFormatter?: (d: any) => string | undefined;
  // 时间轴下方文本的图形样式。[v4.5.1 起支持] 可配置 tickLabelStyle.rotate 以控制时间轴下方每个文本的旋转角度,可避免文本相互重叠
  readonly tickLabelStyle?: ShapeStyle;
  // 时间轴下方文本上的竖线图形样式
  readonly tickLineStyle?: ShapeStyle;
}

TickCfg 参数说明

NameTypeDefault ValueDescription
tickLabelFormatterFunctionnull时间轴下方文本的格式化函数
tickLabelStyleShapeStyle{}时间轴下方文本的图形样式。[v4.5.1 起支持] 可配置 tickLabelStyle.rotate 以控制时间轴下方每个文本的旋转角度,可避免文本相互重叠
tickLineStyleShapeStyle{}时间轴下方文本上方的竖线的图形样式

ControllerCfg 接口定义

暂不支持

控制按钮暂不支持配置样式

不支持循环播放

type ControllerCfg = Partial<{

  /** 控制栏的起始位置以及宽高,width height 将不缩放内部子控制器,仅影响它们的位置分布。需要缩放请使用 scale */
  readonly x?: number;
  readonly y?: number;
  readonly width: number;
  readonly height: number;
  /** 控制栏缩放比例 */
  readonly scale?: number;
  /** 控制器背景的颜色和描边色 */
  readonly fill?: string;
  readonly stroke?: string;
  /** 整个控制栏的字体样式,优先级低于各个子控制器的 text 内的 fontFamily */
  readonly fontFamily?: string;

  /** 播放速度,1 个 tick 花费时间 */
  readonly speed?: number;
  /** 是否循环播放 */
  readonly loop?: boolean;
  /** 是否隐藏右下角的 ’播放时间类型切换器‘ */
  readonly hideTimeTypeController: boolean;

  /** ‘上一帧’按钮的样式,同时可以为其配置 scale、offsetX、offsetY 单独控制该控制器的缩放以及平移 */
  readonly preBtnStyle?: ShapeStyle;

  /** ‘下一帧’按钮的样式,同时可以为其配置 scale、offsetX、offsetY 单独控制该控制器的缩放以及平移 */
  readonly nextBtnStyle?: ShapeStyle;

  /** ‘播放’ 与 ‘暂停’ 按钮的样式,同时可以为其配置 scale、offsetX、offsetY 单独控制该控制器的缩放以及平移 */
  readonly playBtnStyle?: ShapeStyle;

  /** ‘速度控制器’ 的样式,包括速度的指针、速度指示滚轮(横线)、文本的样式,同时可以为 speedControllerStyle 及其子图形样式配置 scale、offsetX、offsetY 单独控制该控制器及其子图形的缩放以及平移) */
  readonly speedControllerStyle?: {
    offsetX?: number,
    offsetY?: number;
    scale?: number
    pointer?: ShapeStyle,
    scroller?: ShapeStyle,
    text?: ShapeStyle
  };

  /** ‘播放时间类型切换器’ 的样式,包括 checkbox 的框、checkbox 的选中勾、文本的样式,同时可以为 timeTypeControllerStyle 及其子图形样式配置 scale、offsetX、offsetY 单独控制该控制器及其子图形的缩放以及平移  */
  readonly timeTypeControllerStyle?: {
    offsetX?: number,
    offsetY?: number;
    scale?: number
    check?: ShapeStyle,
    box?: ShapeStyle,
    text?: ShapeStyle
  };
  /** [v4.5.1 起支持] 控制栏背景方框的样式 */
  readonly containerStyle?: ExtendedShapeStyle;
  /** ‘播放时间类型切换器’单一文本时的文本,默认为‘单一时间’ */
  readonly timePointControllerText?: string;
  /** ‘播放时间类型切换器’单一文本时的文本,默认为‘时间范围’ */
  readonly timeRangeControllerText?: string;
}>

ControllerCfg 参数说明

名称类型默认值描述
xnumber0控制栏开始 x 坐标
ynumber0控制栏开始 y 坐标
widthnumberTimeBar 宽度控制栏宽度,将不缩放内部子控制器,仅影响它们的位置分布
heightnumber40控制栏高度,将不缩放内部子控制器,仅影响它们的位置分布
scalenumber1控制栏缩放比例
speednumber1播放速度
loopbooleanfalse暂不支持,是否循环播放
hideTimeTypeControllerbooleantrue是否隐藏时间类型切换
fillstring控制栏背景框填充色
strokestring整个控制栏的字体样式,优先级低于各个子控制器的 text 内的 fontFamily
preBtnStylestringnull控制栏背景框边框色
preBtnStyleShapeStylenull‘上一帧’按钮的样式,同时可以为其配置 scaleoffsetXoffsetY 单独控制该控制器的缩放以及平移
nextBtnStyleShapeStylenull‘下一帧’按钮的样式,同时可以为其配置 scaleoffsetXoffsetY 单独控制该控制器的缩放以及平移
playBtnStyleShapeStylenull‘播放’ 与 ‘暂停’ 按钮的样式,同时可以为其配置 scaleoffsetXoffsetY 单独控制该控制器的缩放以及平移
speedControllerStyle{ offsetX?: number, offsetY?: number, scale?: number, pointer?: ShapeStyle, text?: ShapeStyle, scroller?: ShapeStyle}null‘速度控制器’ 的样式,包括速度的指针、速度指示滚轮(横线)、文本的样式,同时可以为 speedControllerStyle 及其子图形样式配置 scaleoffsetXoffsetY 单独控制该控制器及其子图形的缩放以及平移
timeTypeControllerStyle{ offsetX?: number, offsetY?: number, scale?: number, box?: ShapeStyle, check?: ShapeStyle, text?: ShapeStyle }null‘播放时间类型切换器’ 的样式,包括 checkbox 的框、checkbox 的选中勾、文本的样式,同时可以为 timeTypeControllerStyle 及其子图形样式配置 scaleoffsetXoffsetY 单独控制该控制器及其子图形的缩放以及平移
containerStyle | ShapeStyle{}控制栏背景方框的样式
timePointControllerTextstring"单一时间"右下角“单一时间”文本,默认为”单一时间“
timePointControllerTextstring"时间范围"右下角“单一时间”文本,默认为”时间范围时间“