X6打造客户旅程时光轴：一文秒懂节点篇

前端

2023-09-26 00:49:37

使用 AntV X6 为客户旅程构建交互式时光轴

导言

客户旅程时光轴是可视化客户旅程中各个阶段的强大工具，它可以让企业了解客户行为，从而优化其体验。AntV X6 是一款功能强大的数据可视化工具，可帮助你创建美观、直观且极具交互性的客户旅程时光轴。

节点类型

在构建客户旅程时光轴时，节点是关键组成部分。AntV X6 提供了多种节点类型，每种类型都有不同的视觉效果和应用场景：

圆形节点： 表示单个实体或状态。
方形节点： 表示一个过程或事件。
菱形节点： 表示决策或分支点。
六边形节点： 表示特殊事件或状态。
自定义节点： 使用自定义图形作为节点，以满足特定需求。

节点样式

AntV X6 还允许你自定义节点的样式，以符合你的业务需求和设计风格：

颜色： 表示不同类型或状态。
形状： 圆形、方形、菱形、六边形或自定义图形。
大小： 根据节点的重要性或数据量调整。
边框： 突出节点或表示其状态。
阴影： 增加立体感和层次感。

节点交互

AntV X6 支持丰富的节点交互，增强用户体验：

单击： 触发事件，例如打开节点详细信息或播放动画。
悬停： 显示节点详细信息或提示信息。
拖拽： 调整节点位置或连接关系。

步骤：构建客户旅程时光轴

使用 AntV X6 构建客户旅程时光轴非常简单：

安装 AntV X6。
创建画布并添加时间轴。
添加节点并设置类型、样式和交互。
渲染画布。

代码示例

以下代码示例演示如何使用 AntV X6 创建一个简单的客户旅程时光轴：

import { X6 } from '@antv/x6';

const graph = new X6.Graph({
  container: document.getElementById('my-graph'),
});

const timeline = new X6.TimeAxis({
  start: new Date('2023-01-01'),
  end: new Date('2023-12-31'),
  unit: 'months',
  interval: 1,
});

const node1 = new X6.Node({
  shape: 'circle',
  label: 'Start',
  x: 100,
  y: 100,
});

const node2 = new X6.Node({
  shape: 'rect',
  label: 'Research',
  x: 200,
  y: 100,
});

const edge1 = new X6.Edge({
  source: node1,
  target: node2,
  label: 'Leads to',
});

graph.add(timeline, node1, node2, edge1);
graph.render();