G2 行为细化

简介

什么是交互？一种允许用户选择如何展示数据不同侧面的技术。
用户为什么要进行交互？

• 数据太多，没办法一次性展现出来
  
• 在图表上仅展示了数据的一部分信息，需要查看详情
  

用户的行为会触发图表的各种交互，在定义交互语法时需要对用户行为进行更深的分析，包括：

• 用户行为的目的
  
• 实现用户目的的方式
  
• 行为过程中的反馈
  

用户行为目的

用户在图表上的所有操作都有其目的，无目的的操作不需要考虑，也尽量避免收到无目的操作的影响，由于图表本质上是展示数据的，所以用户行为的目的都是针对数据的，可以分为：

• 数据探索
  
  • 查看记录的详情
    
  • 查看数据整体和局部
    
  • 同时对比多个数据源的数据
    
  • 查找
    
• 数据操作
  
  • 调整数据顺序
    
  • 更新数据（增、删、改）
    

目前在图表的上的操作主要关注在数据探索，数据操作目前并没有真正的支持。

实现方式

我们分析用户行为目的的实现方式时考虑：

• 触发机制
  
• 信息的展示方式
  
• 关联的图形元素
  
• 反馈方式
  

查看记录的详情

查看记录详情可以分成三个场景：

• 查看单条记录信息
  
• 查看多条记录信息
  
• 对数据进行下钻
  

查看记录的详情可以有几种方式：

• 通过 tooltip 显示详细信息
  
  • 触发：鼠标在画布上移动
    
  • 信息的展示方式：详情信息跟随鼠标移动
    
  • 关联的图形元素：数据对应的图形
    
  • 反馈方式：
    
    • tooltip 跟随鼠标移动
      
    • tooltip 信息更新
      
    • 数据关联的图形处于 actived 状态
      
• 通过其他 DOM 元素
  
  • 触发：鼠标移动到图形上 、 点击选中图形、框选图形
    
  • 信息展示方式：通过旁边的表格或者列表显示详情
    
  • 关联的图形元素：数据对应的图形
    
  • 反馈：
    
    • DOM 内容更新
      
    • 数据关联的图形处于 actived/selected 状态
      
• 通过其他图表显示详情
  
  • 触发：鼠标移动到图形上 、点击选中图形、框选图形
    
  • 信息展示方式：在其他的图表上展示详情
    
  • 关联的图形元素：数据对应的图形
    
  • 反馈：
    
    • 图表更新
      
    • 数据关联的图形处于 actived/selected 状态
      
• 直接在当前图表显示详情
  
  • 触发：点击图形
    
  • 信息的展示方式：在当前图表刷新
    
  • 关联的图形：点击的图形
    
  • 反馈
    
    • 图表更新，显示详情
      
• 在坐标轴上显示坐标对应的数据
  
  • 触发：鼠标移动
    
  • 信息的展示方式：显示十字线、在坐标轴上显示对应的数值
    
  • 关联的图形元素：无
    
  • 反馈：
    
    • 十字线跟着鼠标移动
      
    • 信息不断更新
      
• 在图例上显示对应图形的信息
  
  • 触发：鼠标移动到图形上
    
  • 信息的展示方式：在图例上高亮对应的选项或者数值
    
  • 关联的图形：移动到的图形
    
  • 反馈：
    
    • 图形高亮
      
    • 图例项高亮、在图例上显示具体的值
      

查看数据整体和局部

整体和局部是相对的，当数据量比较大时，一般的可视化策略是 overview first, detail on demand。但是在处理整体和局部时有多种方式，但是基本的操作都是：

• Zoom : 缩放，缩放可以细分为几何缩放和语义缩放
  
  • 几何缩放：画布和图形同时进行缩放，图形会同时放大、缩小
    
  • 语义缩放：图形大小不变，画布展示范围变化
    

• Filter : 过滤
  

整体和局部的切换注意：可恢复性
体现在用户操作上可以有以下多种方式：

• 使用缩略图
  
  • 触发：鼠标在缩略图上拖拽或者点击
    
  • 信息的展示方式：在缩略图上有所有的图形
    
  • 关联的图形：所有图形都会受影响
    
  • 反馈：画布移动，仅显示视窗内的图形
    
• 使用滑块（slider)
  
  • 触发：鼠标拖拽滑块或者点击
    
  • 信息的展示方式：在滑动条的背景上显示整体
    
  • 关联的图形：all
    
  • 反馈：触发过滤，显示过滤完成后的图形
    
• 使用框选框过滤
  
  • 触发：鼠标框选指定区域（双击回复）
    
  • 信息的展示方式：鼠标移动过程中会出现框选框
    
  • 关联的图形：被框选的图形
    
  • 反馈：
    
    • 触发过滤，仅显示被框选的图形
      
• 使用图例
  
  • 触发：鼠标移动到图例选项上，或者点击图例项
    
  • 信息的展示方式：高亮或者触发过滤
    
  • 关联的图形：同图例项相关的图形
    
  • 反馈：
    
    • 鼠标移动触发图形高亮
      
    • 点击触发筛选
      
• 拖动画布/鼠标滚轮/手势
  
  • 触发：在画布上进行拖拽、缩放操作
    
  • 信息的展示：在旁边显示缩放度、显示滑动条
    
  • 关联的图形：所有
    
  • 反馈：
    
    • 画布移动、缩放
      

• 使用缩放按钮缩放画布
  

  • 触发：点击缩放按钮
    
  • 信息展示：展示缩放进度
    
  • 关联的图形：所有
    
  • 反馈：画布缩放，隐藏部分图形
    

    同时对比多个数据源的数据

    在监控场景、多维分析场景下，用户在一个图表上操作时，其他的图表也会有反馈

• 同步显示 tooltip
  

  • 触发：在其中一个图表上移动鼠标
    
  • 信息展示：各个图表上都在对应的位置显示 tooltip
    
  • 关联的图形：tooltip 关联的图形
    
  • 反馈：
    
    • tooltip 同 x 轴的位置同步
      
    • tooltip 内容更新
      
• 同时框选选中/过滤
  
  • 触发：在其中一个图表上框选
    
  • 信息展示：所有图表上显示框选框
    
  • 关联的图形：被框选的图形
    
  • 反馈：
    
    • 选中的图形高亮
      
    • 选中的图形范围过滤
      

• 多表联动显示相关信息
  

  • 触发：选中主要图表上的图形
    
  • 信息展示：在多个次要图表上展示相关的信息（不一定是包含关系）
    
  • 关联的图形：选中的图形
    
  • 反馈：
    
    • 选中的图形高亮
      
    • 次要图表刷新
      

      查找

      当图表上信息过多时会对数据进行查找，有些同全局和局部的场景有些类似，不同的在于查找需要进行具体的输入，而不仅仅是用户的鼠标在画布上进行操作。

• 通过外部输入框查找
  

  • 触发：在外部输入框输入文本
    
  • 信息展示：无
    
  • 关联的图形：匹配的图形
    
  • 反馈：
    
    • 关联的图形高亮
      
    • 或者触发过滤
      
• 在图例上进行查找
  
  • 触发：在图例上的的查找框输入文本
    
  • 信息展示：图例项显示或者隐藏
    
  • 关联的图形：同依然显示图例项关联的图形
    
  • 反馈：
    
    • 图形过滤，没有匹配的图形隐藏
      

• 展开折叠节点，通过树形结构进行查找
  

  • 触发：点击节点
    
  • 信息展示：显示折叠、展开状态
    
  • 关联的图形：子节点对应的图形
    
  • 反馈
    
    • 显示子节点、隐藏子节点
      

      调整数据顺序

      数据顺序对于某些图表来说非常重要，例如：

• 柱状图、饼图的从大到小排布
  

• treemap 中值最大的项排在中间还是开始
  
• 层叠区域图的层叠顺序
  
• 对数据进行分组显示
  

对数据进行排序，目前可以看到的场景基本都是通过两种方式来实现：按钮触发或者拖拽的方式

• 使用外部排序按钮
  
  • 触发：点击按钮
    
  • 信息展示：展示排序的字段、排序方式
    
  • 关联的图形：所有
    
  • 反馈
    
    • 数据排序后重新刷新
      
• 使用坐标轴的标题排序
  
  • 触发：点击坐标轴标题
    
  • 信息展示：切换排序的图标
    
  • 关联的图形：所有
    
  • 反馈
    
    • 图形根据数据顺序重排
      

• 拖拽重排序
  

  • 触发：拖拽图形，移动到对应的位置释放
    
  • 信息展示：是否允许释放
    
  • 关联的图形：拖拽的图形，释放位置的图形
    
  • 反馈
    
    • 图形位置改变
      
    • 重新刷新
      

      更新数据

      数据在图表上显示后，会有更新数据的需求，主要有两种场景：

• 重新加载数据，图表刷新
  

• 用户在图表上操作，导致数据变化
  

这里主要关注第二种，用户在图表上的操作导致的数据更新

• 点击添加数据
  
  • 触发：点击画布
    
  • 信息展示：无
    
  • 关联的图形：新增的图形
    
  • 反馈：点击的位置增加图形，数据源中增加数据
    
• 点击删除数据
  
  • 触发：点击图形
    
  • 信息展示：删除提示
    
  • 关联的图形：点击的图形
    
  • 反馈：图形移除、数据源中的数据移除
    
• 点击按钮删除数据
  
  • 触发：框选图形后点击按钮
    
  • 信息展示：删除提示
    
  • 关联的图形：选中的图形
    
  • 反馈：图形移除、数据源中的数据移除
    
• 点击更新数据
  
  • 触发：点击/框选图形，
    
  • 信息展示：显示编辑面板
    
  • 关联的图形：选中的图形
    
  • 反馈：数据更新，图形刷新
    
• 拖拽移除数据
  
  • 触发：将图形拖动出画布，然后释放
    
  • 信息展示：删除提示
    
  • 关联的图形：拖动的图形
    
  • 反馈：图形移除、数据源中的数据移除
    
• 拖拽合并数据
  
  • 触发：将一个图形拖拽到另一个图形上面
    
  • 信息展示：合并提示（是否可释放）
    
  • 关联的图形：拖拽的图形、释放时激活的图形
    
  • 反馈：数据更新（删除、更新），图形刷新
    
• 拖拽改变数据集
  
  • 触发：将一个图形拖动到另一个图表上
    
  • 信息展示：
    
  • 关联的图形：拖动的图形
    
  • 反馈：
    
    • 一个数据集删除数据，
      
    • 另一个新增数据，
      
    • 图表刷新
      

更多

上面通过用户行为的目的梳理了一些常见的交互，从前面对业务支持的经验来看，基本能够满足需求，我们接下来的工作是细化这些交互行为，抽离出触发事件、中间过程反馈和交互结果，同时在不同的场景去校验。最终形成一套完整的交互语法。