以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()方法触发。但有时我们需要其他的高亮效果，那么我们可以在鼠标点选或者刷选的回调函数中，执行其他高亮效果的操作，例如如下代码：

//给chart指定一个点击事件
myChart.on('click', function (parmas) {
    if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 点击到了 index 为 5 的 series 的 markPoint 上。
            myChart.setOption({
                //重新设置图表option，修改配置重新渲染图形
                ......
            });
        }
    }
});

对于采用数据过滤的选择方法，可以选择在数据过滤后，触发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):