Slider 缩略轴组件

[visiky]

Slider

缩略轴（slider）是一种辅助看数据的组件，它将大量数据浓缩到一个轴上，既可以缩小宏观看数据全貌，又可以放大微观看数据的片段，同时还可以拖拽观察数据在一定区间内的演变。

何时使用

缩略轴是值域数据的浓缩，它跟位置通道 x, y 对应的比例尺的类型息息相关。一般来说时间类型上使用缩略轴的频率高，连续轴使用缩略轴频次低、分类轴几乎不会使用到缩略轴。

• 时间轴，数据跨度非常大，【高频使用】，比如一组时序数据跨度 10 年，需观察这期间数据变化趋势时，建议开启缩略轴；
• 时间轴，数据密度很高，【高频使用】，比如分钟级更新的实时数据，当需要查看一天内的数据走势时，建议开启缩略轴；
• 连续轴，数据密度很高，【低频使用】比如查看 1-100 岁平均身高分布，开启缩略轴可以全局查看身高分布；
• 分类轴【不建议使用】。

开始使用

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .line()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close')
  // 开启 Y 轴缩略轴
  .slider('y', {})

chart.render();

选项

WIP 会根据 GUI 的配置来改变

属性	描述	类型	默认值
orient	缩略轴朝向，横向及纵向	'horizontal' | 'vertical'	'horizontal'
values	初始选区范围，位于 0 ～ 1 区间	[number, number]	-

实现思路

1. 缩略轴作为组件的一种，实现和 axis 一致
2. 交互上，目前暂时不默认推断需要的交互，需要手动配置 interactions: [{ type: 'sliderFilter' }]
   • 缩略轴组件会有 min, max 两个值（取值范围都是 0~1）代表当前选中区间，当选中区间发生变化时，缩略轴组件会抛出事件，G2 层可以监听事件作相应的 scale（x 或 y scale）的 domain 调整，然后更新图表。

案例验证

X 轴缩略轴

http://g2plot.antv.antgroup.com/examples/line/basic/#line-slider

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .line()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close')
  // 开启 Y 轴缩略轴
  .slider('x', {})

chart.render();

Y 轴缩略轴

新增：G2 4.0 没有此功能

• 参考「开始使用」进行验证

缩略轴回调事件

antvis/G2Plot#3314

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart
  .line()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/551d80c6-a6be-4f3c-a82a-abd739e12977.csv',
  })
  .encode('x', 'date')
  .encode('y', 'close')
  // 开启 Y 轴缩略轴
  .slider('x', {})

chart.render();

chart.on('slider:valuechanged', () => {})

补充内容（后续删除）

• 缩略轴设计规范：https://www.yuque.com/mo-college/vis-design/gs5ow9#MG26m
• 缩略轴设计稿子：内网地址（外网不可访问）

[visiky]

待办事项:

• slider 配置到 view 上
• 分面下的 slider
• slider 的同步
• slider 迷你趋势图