介绍接在LearnD3的第八部分：Joins。它只是一个英文翻译。可以修改的代码部分由静态图像替换。如需实时互动，请阅读原文。原文：LearnD3：Interaction版本：2020年3月24日发布来源我的GitHub文本几乎总是包含太多信息，无法合理地“适合”图表。所以设计不仅仅是决定如何展示一些东西，而是根据我们认为对想象中的读者来说重要的东西来决定展示什么和不展示什么。多亏了计算机，真正的读者现在有了发言权：可以根据他们的兴趣定制图表。然而，这种力量是一把双刃剑。交互性允许读者发现更多信息，但又迫使读者参与到交互中。如果我们不小心，我们可能会将重要的见解隐藏在读者永远不会点击的控件后面。如果我们的目的是传达已知信息，那么在考虑交互之前，我们应该设计一个有效的静态图。另一方面，如果我们试图探索未知，那么交互可能比编写新图更快（但也可以考虑像VegaLite这样的视觉语法探索）！可以在BenShneiderman的信息搜索格言中找到一个很好的交互式指南：首先概述，缩放和过滤，然后按需提供详细信息。概述是图表的初始形式。它的目的不是显示所有数据（这是不可能的），而是提供所有数据的“宏观”视图。概述是为了引导读者探索。缩放和过滤是选择显示在感兴趣主题上的内容的方法。我们已经看到了将图表裁剪到几年前的控件；还有自由缩放形式、平移和焦点+上下文。如果我们比较多个时间序列，我们可能需要像多折线图示例中那样进行过滤。另请参见可刷散点图矩阵。点播的细节让读者可以从图表中提取准确的数值，而不局限于视觉近似值。这可以像鼠标提示一样简单。鼠标提示的一种方法是在SVG中添加无限的标题元素。将鼠标悬停（并稍??等片刻）以查看下方特定日期的Apple股价。在上图中，1260个不可见的矩形元素垂直穿过图表并水平穿过相邻数据点（使用d3.pairs计算）。当鼠标悬停在矩形上时，将显示子标题元素的文本。因此，将工具提示显示为鼠标x位置的函数最适合时间序列图，其中y是因变量。一种更通用的方法是Voronoi叠加，其中最靠近鼠标的数据点被确定为信息提示（为了清楚起见，在下面绘制了Voronoi图......并且因为它看起来很酷。你通常不会显示它。）Localmousetips有几个缺点：显示速度较慢；移动浏览器不支持它们；哪个数据点与提示相关联并不总是很明显，尤其是在使用Voronoi图时。然而，再多做一些工作，我们就可以自定义鼠标提示了。元素的顺序在这里很重要：SVG不支持z顺序，因此要在线条和轴上方绘制信息提示，它必须放在最后。虽然本机鼠标提示会自动显示，但自定义信息提示通常需要事件监听。浏览器会在用户执行操作时调用这些函数，例如将鼠标移到某个元素上。上面的侦听器捕获闭包中的数据（a和b）以了解触发事件时要显示的内容。（我们使用Object.assign是因为Observable的HTML模板文字目前不支持事件监听器作为属性。我们更新的超脚本文字确实支持事件监听器，所以请考虑使用它。我们计划在不久的将来升级标准库。）自定义消息提示在下面的类中实现。它提供用于嵌入的tooltip.node属性（SVGg元素），以及根据需要更新工具提示的tooltip.show和tooltip.hide方法。这允许在如何触发信息提示方面具有一定的灵活性。上面的图表使用了Observable的HTML模板文本，但我们可以用D3风格实现一个相同的图表。用你喜欢的！鼠标悬停事件触发的信息提示可能很昂贵：它们需要为图表的每个悬停区域提供一个单独的元素。对于复杂的图表，您可以通过计算按需悬停的内容来提高性能。对于一维排序的数据（比如我们这里的时间序列数据），一个特别有效的方法是在mousemove事件触发时进行二分查找。二进制搜索将立即返回鼠标左侧的数据点，但出于交互目的，最好找到距离鼠标最近的数据点（沿着x）。因此，下面的函数首先将指定日期减半，然后检查以下数据点是否更接近。以上所有示例都演示了本地交互：与图表交互只会影响图表本身。Observables最令人兴奋的方面之一是语言级别的反应性使得一个单元格中的交互很容易传播到笔记本中的任何其他单元格，从而实现全局交互！Observables中的大多数交互控件都是由视图实现的。要创建视图，请定义一个返回HTML输入元素的viewof单元。输入的实时值将被馈送到笔记本的其余部分。例如，这是一个由范围输入控制的数字。同样，有一个文本输入框可以在您键入时显示其值，还有一个用于选择几个固定选项之一的下拉菜单。（还记得我们之前看到的动画生成器吗？这些视图也涉及到生成器：当你使用viewof运算符时，Observable隐式创建一个异步输入生成器，每当你与视图交互时，它都会生成一个新值。）但是视图不限于对于HTML输入，它们可以是任何东西！唯一的要求是视图提供一个值属性并在该值更改时触发输入事件。甚至图表也可以是视图。下图在鼠标移动时触发合成输入事件。感谢Observable社区，有许多可以重用的自定义输入。查看Jeremy的输入集市以获得各种有用的选项。或者对于动画，考虑一个洗涤器。在本教程中，我们快速浏览了各种交互技术，包括鼠标提示、事件侦听器、Voronoi叠加、视图，但还有很多我们还没有涉及！首先，我们甚至没有提到D3的可重用行为：刷、缩放、拖动。（对于自主学习，可以在D3画廊和集合中找到示例。）事实上，既然我们已经介绍了基础知识，那么是时候退一步思考下一步该怎么做了。下一个附录有关交互的更多信息，请阅读GregorAisch对交互式图形的辩护。根据源码去除平台依赖，提取主要代码。示例如下：示例1示例2示例3示例4参考学习D3：交互
