关于前端:译Learn-D3-入门文档Interaction

继 Learn D3: Joins 第八篇，只是英文翻译，可批改代码的局部用动态图片代替了，想要实时交互请浏览原文。

简直总是有太多的信息无奈正当地“包容”在图表中。因而，设计不仅仅是决定如何展现某些货色，而是依据咱们认为对设想中的读者重要的货色，来决定展现什么和不展现什么。

多亏了计算机，真正的读者当初有了发言权：能够依据读者趣味的须要定制图表。

然而，这种力量是一把双刃剑。交互性容许读者发现更多信息，但迫使读者参加互动。如果咱们不小心，咱们可能会将重要的见解暗藏在读者从不点击的控件前面。

如果咱们的目标是传播已知的信息，咱们应该在思考交互之前设计一个无效的动态图表。另一方面，如果咱们试图摸索未知，那么交互能够比编码一个新的图表更快（但也思考可视化语法摸索，如 Vega Lite）！

比拟好的互动指南能够参考 Ben Shneiderman 的 information-seeking mantra：

Overview first,zoom and filter,then details on demand.

overview 是图表的初始模式。它的目标不是显示所有数据（这是不可能的），而是提供所有数据的“宏观”视图。overview 是疏导读者摸索。

zooming 和 filtering 是抉择感兴趣主题内容显示的办法。咱们以前看到过将图表裁剪到各个年份的控件；还有自在缩放的模式、平移和焦点 + 上下文。如果咱们比拟多个工夫序列，咱们可能须要像多折线图示例中那样进行过滤。另请参见可刷散点图矩阵。

details on demand 容许读者从图表中提取准确值，而不限于视觉近似值。这能够像鼠标提醒一样简略。

鼠标提醒的一种办法是在 SVG 中不受限制的增加题目元素。鼠标悬停（并短暂期待）查看上面某一天的苹果股价。

上图中，1260 个不可见的矩形元素垂直贯通图表，程度横跨相邻的数据点（用 d3.pairs 计算）。当鼠标悬停在矩形上时，将显示子 title 元素的文本。因而，显示提示信息的是鼠标 x 地位的函数，最适宜于 y 为因变量的工夫序列图。

更通用的办法是 Voronoi 笼罩，其中间隔鼠标最近的数据点确定为信息提醒(为了清晰起见，上面绘制了 Voronoi 图……并且因为它看起来很酷。你通常不会显示它。）

本地鼠标提醒有几个毛病：它们的显示速度较慢；挪动浏览器不反对它们；而且并不总是很显著哪个数据点与提示信息关联，尤其是在应用 Voronoi 图时。

不过，再多做一点工作，咱们就能够定制鼠标提醒了。

这里元素的程序很重要：SVG 不反对 z 程序，因而要在直线和轴之上绘制信息提醒，它必须是最初一个。

尽管本地鼠标提醒会主动显示，但自定义信息提醒通常须要事件监听。当用户执行操作（例如将鼠标移到元素上）时，浏览器将调用这些函数。下面的侦听器捕捉闭包中的数据（a 和 b），以理解在触发事件时显示什么。

（咱们应用 Object.assign，因为 Observable 的 HTML 模板文本以后不反对事件侦听器作为属性。咱们更新的 hyperscript literal 的确反对事件侦听器，所以请思考应用它。咱们打算在不久的未来降级规范库。）

自定义信息提醒在上面的类中实现。它提供了用于嵌入的 tooltip.node 属性（SVG g 元素），以及 tooltip.show 和 tooltip.hide 办法，以依据须要更新工具提醒。这为信息提醒的触发形式提供了肯定的灵活性。

下面的图表应用 Observable 的 HTML 模板文本，然而咱们能够用 D3 格调实现一个雷同的图表。用你喜爱的！

mouseover 事件触发的信息提醒可能代价昂扬：它们要求图表的每个可悬停区域都有一个独自的元素。对于简单的图表，你能够通过计算按需悬停的内容来进步性能。

对于一维排序的数据（例如咱们这里的工夫序列数据），一种特地高效的办法是在 mousemove 事件触发时进行二分查找。

二分查找法将立刻返回鼠标左侧的数据点，但出于交互目标，最好找到离鼠标最近的数据点（沿 x）。因而，上面的函数首先对分指定日期，而后查看以下数据点是否更靠近。

以上所有示例都演示了本地交互：与图表交互只影响图表自身。Observable 最令人兴奋的方面之一是，语言程度的反馈性使一个单元中的交互很容易扩散到笔记本中的任何其它单元，从而实现全局交互！

Observable 中的大多数交互控件都由视图实现。要创立视图，定义返回 HTML input 元素的 viewof 单元。而后，input 的实时值将被提供给笔记本的其余部分。

例如，这里有一个由范畴输出管制的数字。

相似地，这里有一个文本输出，能够在你键入时显示其值，还有一个下拉菜单，用于从多个固定选项中抉择一个。

（还记得之前咱们看到动画生成器的时候吗？这些视图也波及生成器：当你应用 viewof 操作符时，Observable 隐式创立了一个异步输出生成器，每当你与视图交互时，它都会生成一个新值。）

然而视图并不局限于 HTML input，它们能够是任何货色！惟一的要求是视图提供一个 value 属性，并在该值变动时触发 input 事件。

甚至图表也能够是视图。上面的图表在鼠标挪动时触发合成输出事件。

多亏了 Observable 社区，有许多定制的输出能够复用。无关各种有用的选项，请参见 Jeremy 的 inputs bazaar。或者对于动画，思考一个 scrubber。

在本教程中，咱们疾速浏览了各种交互技术，包含鼠标提醒、事件侦听器、Voronoi 笼罩图、视图，但还有很多咱们没有介绍的内容！首先，咱们甚至没有提到 D3 的可复用行为：brushing、zooming、dragging。(对于自主学习，请在 D3 图库和珍藏中查找示例。）

事实上，既然咱们曾经涵盖了基本知识，当初是时候回头思考下一步该怎么走了。

无关交互的更多信息，请浏览 Gregor Aisch 的 defense of interactive graphics。

依据源码，去除了平台依赖，提取了次要代码，有以下示例：

引子