首页 > 数据可视化 > 以echarts为例谈谈可视化中的交互(1,选择操作)
2018
05-22

以echarts为例谈谈可视化中的交互(1,选择操作)

数据可视化系统中除了视觉呈现部分,另一个核心要素是人机交互。

交互技术是用户与信息系统之间的信息交流方法。 对于高维多元数据可视化系统而言, 交互是必须的要素之一。这种必须体现在两个方面:其一,高维多元数据大规模特性所造成的数据过载,让有限的可视化空间无法呈现全部数据,同时也难以表现高维复杂结构,故而需要交互技术弥补其中差距;其二,交互过程本身也是由用户主动参与的建立知识心智模型的过程, 交互技术非常有助于用户理解数据、发现模式。对于现代可视分析学而言,交互技术是必不可少的组成部分。数据可视化领域的专家Ben Sheiderman提出的信息视觉检索的要诀:overview first, zomm and filter, then details on demand描述了通过交互探索大量数据的有效方法。

数据可视化中的交互研究属于可视化与人机交互(HCI) 的交叉领域。关于交互技术的研究由来已久,不同学者构建了各有不同的分类体系。 Daniel Keim[1]将交互技术划分为: 投影/映射,过滤,缩放,失真变形,刷选和链接; Kang Y等人[2]则从用户意图的角度,将交互划分为选择(Select)、 探索(Explore)、 再布局(Reconfigure)、 视觉编码(Encode)、 抽象化/具体化(Abstract/Elaborate) 、 过滤(Filter)、 链接(Connect)七大类。

信息可视化领域中各专家对交互技术的不同分类体系,引用自Kang Y等人的论文[2]

关于交互方法的分类很多,有各自的依据和适用情况。本文以Kang Y等人的标准为线索,结合echarts中的例子,探讨交互的意义及实现方法。

1. 选择 (selcect, mark something as interesting)

选择的意义在于标记出感兴趣的对象,以便进一步追踪处理。对于呈现大量数据元素的可视化视图而言,用户很难追踪他们感兴趣的数据元素。因此,通过选择功能以便对不同数据元素进行区分,可以说是当前任何一种交互式可视化系统必备的功能。

例如在一个邮件联系人关联图(径向布局的节点链接图)中。人员非常多,用户通常希望标出其想要重点了解的邮件联系人(节点),以便进一步研究。

要实现选择交互,实际需要处理三个步骤:首先是如何选择图元及其背后的数据,其次是让被选择的图元与众不同,最后是获取被选择的数据对象以便进行下一步处理。

1.1 如何选择图元及其背后的数据

a) 鼠标点选。在echarts中,最简单的方式当然是鼠标点选。鼠标事件包括’click’, ‘dblclick’, ‘mousedown’, ‘mouseup’, ‘mouseover’,’ mouseout’, ‘globalout’, ‘contextmenu’。鼠标事件的事件响应包含一个参数和回调函数。这个参数是一个复杂对象,其的属性包括鼠标点到了哪个图元、图元背后的数据等等信息;而回调函数中就可以获取这个参数,从而进一步地操作。关于鼠标事件,详见echarts文档:echarts中的事件和行为echart API:event

b) 刷选。除了鼠标点选外,echart还支持刷选。即是指定一个选择框(即刷子),然后返回框中包含的图元。选择框可以拖动,缩放,固定,取消;选择框的形状包括矩形,任意形状,横向,纵向。这样就可以实现在一定范围内大量选择图元。总而言之,brush可谓选择方式的重要补充。不过遗憾的是brush目前只支持散点图、柱状图、K线图、平行坐标等少数图表类型。关于刷选,详见echart API: brush

刷选的例子,例子链接

c)数据过滤。还有一种选择方式,是从数据角度进行查询和过滤。例如,在邮件联系人关联图中,用户只想选择姓名Z字母开头的人,那么最好的方式是通过字符串匹配的方式过滤原始数据。而数据改变后,再刷新可视化图表。显然,要实现以上功能,需要的是完整前后台设计。例如,如果数据规模不大可以放在前端处理,那么通过VUEjs或者angularjs实现一个数据驱动架构,配合lodash.js类库实现数据搜索、过滤的机制。而echarts只负责最后的图表显示,或者代码触发组件行为,详见echarts: action。如果数据规模很大,需要后端处理的话,则需要把查询参数传送到后端,处理完毕后再返回结果。

echarts提供一种数据过滤组件,称之为visualMap,详见配置项:visualMap。它可以将数据映射到一个视觉元素上,然后提供可拖动的范围选择器,从而过滤数据。

1.2 让被选择的图元与众不同

前文已经描述了在echarts中如何选择图元,接下来描述如何让被选择的图元变得与众不同,从而方便用户追踪。要让被选择的图元与其他图元区别开来,方法无非是“高亮”,即给选中对象加一个显示效果,例如改变被选中的图元的颜色、透明度、边框颜色、边框大小、自身的大小、添加标签文字、添加小图标等等。echarts默认对选中的数据项加一个放大的高亮效果。这个效果可以通过mychart.dispatchAction()方法触发。但有时我们需要其他的高亮效果,那么我们可以在鼠标点选或者刷选的回调函数中,执行其他高亮效果的操作,例如如下代码:

对于采用数据过滤的选择方法,可以选择在数据过滤后,触发echart的action事件。详见 代码触发Echarts中的组件的行为

1.3 获取被选择的数据对象以便进行下一步处理

选中图元和高亮图元,是在数据可视化的展现层响应用户的交互。但在模型层(或者说数据层),需要记录这些选中的数据对象,以便进行进一步的处理,尤其是在那些多个关联视图构成的可视化系统中。鉴于现在web前端开发中已经普遍使用诸如vuejs,angularjs,react.js这样的MVVM框架,像“视图层的选中操作影响模型层的数据”这样的操作已经非常容易实现了。具体的说,我们需要在模型层设置一个名为selected_item的数组,当用户触发了选择事件后,就在回调函数中修改selected_item数组的内容。同时使用MVVM框架的数据监听机制监听selected_item数组的变化,如果有变化发生则触发下一步处理的函数,例如将选择的对象用另一个小图重新显示出来。等等。

chinavis2017挑战赛获奖者东北大学高强作品。这个交互系统就是典型的用echart实现的可视分析系统。系统中使用了多个可视化案例,这些可视化案例以Integrated views的方式整合,案例之间有数据的关联性。通过选择某些感兴趣的数据项,可触发其他图例展示这些感兴趣的数据项。

 

 

[1] Ward M, Grinstein G, Keim D. Interactive Data Visualization: Foundations, Techniques, and
Applications[M]. A. K. Peters, Ltd., 2010. 188-195.

[2] Yi J S, Kang Y A, Stasko J T, et al. Toward a deeper understanding of the role of interaction in
information visualization.[J]. IEEE Transactions on Visualization & Computer Graphics. 2007, 13(6):


留下一个回复

你的email不会被公开。