D3 4.x数据可视化实战手册（第2版）

第10章　可视化交互

本章涵盖以下内容：

• 鼠标交互
• 多点触摸设备交互
• 缩放和平移行为的实现
• 拖曳行为的实现

10.1　简介

可视化设计的最终目标是优化应用，以帮助人们更有效地认知。

——C. Ware（2012年）

数据可视化的目标，是通过比喻、心智模型对比、认知放大等方式，帮助用户更快更有效地从大量数据中获取信息。到现在为止，本书中已经介绍了D3中的几种不同的技术，用以实现不同类型的可视化。然而，我们还没有碰触到可视化中比较重要的那部分——人机交互。很多研究都认为人机交互在信息可视化中具有独一无二的价值。

可视化与计算控制结合可大大加快复杂情形的分析速度……这个案例充分表明，这种方式可以延展模型的适用性。

——I. Barrass与J. Leng（2011年）

在本章中，我们主要学习D3的人机交互，即为我们的可视化图形添加计算控制能力。

10.2　鼠标交互

鼠标是桌面和移动计算设备中最为常见和流行的人机交互设备。即便在多点触摸设备大行其道的今天，触摸事件还是会处理为鼠标事件。本节，我们将学习如何通过D3处理标准的鼠标事件。

10.2.1　准备工作

在浏览器中打开如下文件的本地副本：

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter10/  
mouse.html。

10.2.2　开始编程

下面的代码示例中，我们研究在D3中注册和处理与鼠标事件的相关技术。这个例子虽然比较特殊，仅处理了点击和移动，但它用到的技术都能很容易地用到其他鼠标事件上。

<script type="text/javascript"> 　　var r = 400; 　　var svg = d3.select("body") ...