${formatDate(d.date)}\n${formatClose(d.close)}

3e:null 3f:["$","title",null,{"children":"Learn D3: Interaction | weifeng.zhang | Observable"}] 45:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1666840825915.748,"size":48822}] 43:{"id":"58f062f9f7996709","slug":null,"title":"Learn D3: Interaction","thumbnail":"6caa9e859704da4615b91ab7759d2684deebca69c1c761035af57e59b1dcafb7","access_level":"public","create_time":"$D2022-10-27T03:20:25.915Z","update_time":"$D2022-10-27T08:55:23.230Z","view_time":null,"first_public_time":"$D2022-10-27T03:20:25.915Z","has_unpublished_edits":null,"fork":{"id":"78807d1c5e2d1bcd","slug":"learn-d3-interaction","title":"Learn D3: Interaction","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6b3568667956ea80","login":"wulakaka","name":"weifeng.zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d2a0eb5a21e76cf20c6c7664341f21aa82a675d80335a7d04c51ee172929a6b","tier":"starter_2024","bio":"","following":false},"version":1389,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6635d799ab4ae335","login":"wulakaka","name":"weifeng.zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d2a0eb5a21e76cf20c6c7664341f21aa82a675d80335a7d04c51ee172929a6b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"6635d799ab4ae335","login":"wulakaka","name":"weifeng.zhang","avatar_url":"https://avatars-next.observableusercontent.com/6d2a0eb5a21e76cf20c6c7664341f21aa82a675d80335a7d04c51ee172929a6b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Learn D3: Interaction","cells":[{"id":34,"value":"# Learn D3: Interaction\n\nThere’s almost always too much information than can reasonably “fit” in a graphic. Thus design is not just deciding *how* to show something, but *what* to show and what not to show based on what we think matters to the imagined reader.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1274,"value":"几乎总是有太多的信息，无法合理地“适应”图形。因此，设计不仅仅是决定*如何*展示一些东西，而是根据我们认为对想象的读者重要的东西来展示*什么*和不展示什么。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"And thanks to computers, the *actual* reader can now have a say: the graphic can be tailored on demand to the reader’s interests.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"多亏了计算机，*实际*的读者现在可以有发言权：图形可以根据读者的兴趣按需定制。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"Yet this power is a double-edged sword. Interactivity allows the reader to surface more information, but forces the reader to work for it. If we’re not careful, we may hide important insights behind controls that readers never click.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"现在这个能力是把双刃剑。交互允许读者获取更多信息，但是也强迫读者为他工作。如果我们不小心，我们可能会将重要的见解隐藏在读者永远不会点击的控件背后。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"If our intent is to communicate something known, we should design an effective static graphic before even considering interaction. On the other hand, if we seek to explore the unknown, then interaction can be faster than coding a new graphic (but consider also visualization grammars for exploration, such as [Vega-Lite](https://vega.github.io/vega-lite/))!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"如果我们意在传达一些已知的东西，应该在考虑交互前设计一个有效的静态图形。另一方面，如果我们试图探索未知，那么交互可以比编码一个新图形更快（但也要考虑用于探索的可视化语法，比如[Vega-Lite](https://vega.github.io/vega-lite/)）！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":636,"value":"A good guideline for interaction is Ben Shneiderman’s [information-seeking mantra](https://www.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf):\n\n> *Overview first, \n> zoom and filter, \n> then details on demand.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"一个好的交互指南是 Ben Shneiderman 的 [information-seeking mantra](https://www.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf):\n\n> *Overview first, \n> zoom and filter, \n> then details on demand.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":700,"value":"The *overview* is the initial form of the graphic. Its purpose is not to show everything (this is impossible), but to give a “macro” view of all the data. The overview is a map that guides the reader’s exploration.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"*overview* 是图形的最初形式。它的目的不是显示所有东西（这是不可能的），而是提供所有数据的“宏观”视图。概览是带领读者探索的地图。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":677,"value":"*Zooming* and *filtering* are methods of culling what is shown to focus on a topic of interest. We previously saw controls to crop the chart to individual years; there’s also [free-form zooming](/@d3/zoomable-area-chart), [panning](/@d3/pannable-chart) and [focus + context](/@d3/focus-context). If we were comparing many time series, we might want filtering as in the [multi-line chart example](/@d3/multi-line-chart). See also the [brushable scatterplot matrix](/@d3/brushable-scatterplot-matrix).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1302,"value":"*zooming* 和 *filtering* 是剔除显示的内容以专注于感兴趣主题的方法。我们之间看过将图表裁剪为单个年份的控件；还有[自由形式的缩放](/@d3/zoomable-area-chart)、[平移](/@d3/pannable-chart)和[对焦+上下文](/@d3/focus-context)。如果我们要比较许多的时间序列，则可能需要像[多线图示例](/@d3/multi-line-chart)中那样进行筛选。另请参阅[可刷散点图矩阵](/@d3/brushable-scatterplot-matrix)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":702,"value":"*Details on demand* allows the reader to extract exact values from the chart, rather than be limited to visual approximations. This can be as simple as tooltips.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"*details on demand* 允许读者从图表中提取精确值，而不是局限于视觉近似值。这可以像tooltip一样简单。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"One approach to tooltips is to liberally sprinkle title elements into SVG. Mouseover (and wait briefly) to see the Apple stock price for a particular day below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"tooltip的一种方法是将title元素大量地撒入SVG中。鼠标悬停（并短暂等待）以查看下面某一天Apple的股价。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"Above, ${(data.length - 1).toLocaleString(\"en\")} invisible rect elements vertically span the chart and horizontally span adjacent data points (computed with [d3.pairs](https://github.com/d3/d3-array/blob/master/README.md#pairs)). When the mouse hovers a rect, the text of the child title element is shown. Thus, the displayed tooltip is a function of the mouse’s *x*-position, which is most appropriate for time-series charts where *y* is the dependent variable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1319,"value":"在上面，${(data.length - 1).toLocaleString(\"en\")} 个不可见的 rect 元素垂直跨越图表，水平跨越相邻的数据点（通过 [d3.pairs](https://github.com/d3/d3-array/blob/master/README.md#pairs) 计算）。当鼠标悬停于一个 rect 元素，子标题元素的文本显示。所以，显示的tooltip是一个鼠标 *x*-位置的函数，这最适合于 *y* 为因变量的时间序列图表。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":299,"value":"A more general approach is a [Voronoi overlay](https://github.com/d3/d3-delaunay), where the closest data point to the mouse determines the tooltip. (The Voronoi diagram is drawn below for clarity… and because it looks cool. You wouldn’t typically show it.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"更通用的方法是 [Voronoi overlay](https://github.com/d3/d3-delaunay)，其中最接近鼠标的数据点决定tooltip。（为清楚起见，沃罗诺伊图绘制如下...因为它看起来很酷。您通常不会显示它。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"voronoi = d3.Delaunay\n .from(data, d => x(d.date), d => y(d.close))\n .voronoi([0, 0, width, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"Native tooltips have several drawbacks: they can be sluggish to appear; mobile browsers don’t support them; and it’s not always obvious which data point is associated with the tooltip, especially when using a Voronoi diagram.\n\nWith a little more work, though, we can have custom tooltips.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"原生tooltip有几个缺点：他们可能看起来很慢；移动浏览器不支持；并且哪个数据点与tooltip相关联并不总是很明显，尤其是在使用沃罗诺伊图时。\n\n然而，通过一点工作，我们可以自定义tooltip。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":318,"value":"{\n const tooltip = new Tooltip();\n return htl.html``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"The ordering of elements here is important: SVG does not support *z*-order, so to draw the tooltip on top of the line and axes, it must be last.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"这里元素的顺序很重要： SVG 不支持 *z* 顺序，所以为了将tooltip绘制到折线和轴之上，它必须放在最后。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"Whereas native tooltips appear automatically, custom tooltips typically require event listeners. These functions are invoked by the browser when the user performs an action, such as moving the mouse over an element. The listeners above capture data (*a* and *b*) in a closure to know what to show when the event is triggered.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"原生tooltip可以自动显示，而自定义tooltip通常需要时间监听。当用户执行操作时，这些函数由浏览器触发，例如移动鼠标到元素上。上面的侦听器在闭包中捕获数据（*a* 和 *b*），以了解触发事件时要显示的内容。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":510,"value":"The custom tooltip is implemented in the class below. It exposes a *tooltip*.node property (an SVG g element) for embedding, and *tooltip*.show and *tooltip*.hide methods to update the tooltip as needed. This affords some flexibility in how the tooltip is triggered.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"自定义 tooltip 在下面的类中实现。它暴露了一个 *tooltip*.node 属性（一个 SVG 元素）用于嵌入，*tooltip*.show 和 *tooltip*.hide 方法用于在需要时更新 tooltip。这提供了一些灵活性给触发 tooltip 的方式。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"class Tooltip {\n constructor() {\n this._date = htl.svg``;\n this._close = htl.svg``;\n this.node = htl.svg`\n \n ${this._date}\n ${this._close}\n \n`;\n }\n show(d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(${x(d.date)},${y(d.close)})`);\n this._date.textContent = formatDate(d.date);\n this._close.textContent = formatClose(d.close);\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"The chart above uses [hypertext literal](/@observablehq/htl), but we can implement an identical chart in the D3 style. Use whichever you prefer!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"上面的图表使用了 [hypertext literal](/@observablehq/htl)，但是我们可以用D3风格实现一个特别的图表。用你喜欢的！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":639,"value":"{\n const tooltip = new Tooltip();\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-miterlimit\", 1)\n .attr(\"d\", line(data));\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"pointer-events\", \"all\")\n .selectAll(\"rect\")\n .data(d3.pairs(data))\n .join(\"rect\")\n .attr(\"x\", ([a, b]) => x(a.date))\n .attr(\"height\", height)\n .attr(\"width\", ([a, b]) => x(b.date) - x(a.date))\n .on(\"mouseover\", (event, [a]) => tooltip.show(a))\n .on(\"mouseout\", () => tooltip.hide());\n\n svg.append(() => tooltip.node);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"Tooltips triggered by *mouseover* events can be expensive: they require a separate element for each hoverable area of the chart. For complex charts, you may improve performance by calculating what is hovered on demand.\n\nA particularly efficient approach for data sorted on one dimension, such as our time-series data here, is [bisection](https://observablehq.com/@d3/d3-bisect) on *mousemove*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1340,"value":"通过 *mouseover* 触发的 tooltip 可能会非常昂贵：他们需要各自独立的可以划入的区域。对于复杂的图表来说，你可以通过计算按需悬停的内容来提高性能。\n\n对于按一个维度排序的数据，一种特别有效的方法，例如我们这里的时间序列数据，是 *mousemove* 的 [平分（bisection）](https://observablehq.com/@d3/d3-bisect)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":495,"value":"{\n const tooltip = new Tooltip();\n return htl.html``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"Bisection finds the value closest to the mouse (along *x*). The function below first computes the index of the data point closest to the specified date (assuming that the data is sorted in ascending order), and then returns the associated data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"平分法查找最接近鼠标的值（沿着 *x*）。下面的函数首先计算最接近指定日期的数据点的索引（假设数据升序排序），然后返回关联的数据。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":502,"value":"bisect = {\n const bisectDate = d3.bisector(d => d.date).center;\n return (data, date) => data[bisectDate(data, date)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"All the examples above demonstrate *local* interaction: interacting with the chart only affects the chart itself. One of the most exciting aspects of Observable is that language-level reactivity makes it easy for interaction in one cell to ripple to any other cell in the notebook for *global* interaction!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"上面的所有示例都演示*本地*交互：与图表的交互只影响图表本身。Observable 最令人兴奋的方面之一是语言级的反应性使得一个单元格中的交互很容易波及笔记中任何其他单元格以进行全局交互！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1030,"value":"Most interactive controls in Observable are implemented as [views](/@observablehq/introduction-to-views). To make a view, define a viewof cell that returns an HTML input element. The input’s live current value will then be exposed to the rest of the notebook.\n\nFor example, here’s a number controlled by a range input.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1352,"value":"大部分 Observable 的交互控件通过 [views](/@observablehq/introduction-to-views) 实现。为了创建一个 view，定义一个返回 HTML input 元素的 `viewof` 单元格。然后，input的实时值将暴露给笔记的其余部分。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":563,"value":"viewof number = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"number","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"md`Similarly, here’s a text input that exposes its value as you type, and a drop-down menu for choosing one of a number of fixed options.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"类似的，这里的文本输入框，会在打字时暴露它的value值，以及一个用于选择许多固定选项之一的下拉菜单。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":570,"value":"viewof name = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"name","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"viewof fruit = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"fruit","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"While the above inputs are implemented by hand, more often on Observable we use [Observable Inputs](/observablehq/inputs), which provide conveniences such as labels and formatting.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"虽然上面的input很容易实现，但是更通常情况下我们使用 [Observable Inputs](/observablehq/inputs)，它提供了便捷的东西，比如 label 和 formatting。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1239,"value":"viewof foo = Inputs.range([0, 100], {step: 1, label: \"Favorite number\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1249,"value":"foo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"(Remember earlier when we saw generators for [animation](/@d3/learn-d3-animation?collection=@d3/learn-d3)? These views involve generators, too: when you use the viewof operator, Observable implicitly creates an [asynchronous input generator](https://github.com/observablehq/stdlib/blob/master/README.md#Generators_input) that yields a new value whenever you interact with the view.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"（还记得之前看到的[动画](/@d3/learn-d3-animation?collection=@d3/learn-d3)生成器？这些视图也涉及生成器：当你使用 `viewof` 操作符时，Observable 隐式创建一个[异步input生成器](https://github.com/observablehq/stdlib/blob/master/README.md#Generators_input)，在与视图交互时，它生成（yield）一个新值）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1114,"value":"But views aren’t limited to HTML inputs—they can be anything! The only requirement is that the view exposes a *value* property and emits *input* events whenever that value changes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1367,"value":"视图不仅限于HTML的input，他们可以是任意东西！唯一的要求是，视图暴露一个 *value* 属性，并且在值变化时发出 *input* 事件。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":585,"value":"Even charts can be views. The chart below [dispatches synthetic input events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) when the mouse moves.\n\n${hover ? `Apple stock closed at ${formatClose(hover.close)} on ${formatDate(hover.date)}.` : `Hover the chart below to inspect values.`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"甚至图表也可以是视图。下面的图在鼠标移动时[分发合成input事件](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)。\n\n${hover ? `${formatDate(hover.date)} 苹果收盘股价为 ${formatClose(hover.close)}。` : `鼠标划入图表以检查值。`}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":587,"value":"viewof hover = Object.assign(htl.html``, {\n value: null // set initial value\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"hover","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"For animation, consider a [scrubber](/@mbostock/scrubber).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"对于动画，请考虑使用 [洗涤器 scrubber](/@mbostock/scrubber)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":950,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"viewof i = Scrubber(d3.range(100), {\n autoplay: false,\n loop: false\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"i","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1137,"value":"We raced through a variety of interaction techniques in this tutorial—tooltips, event listeners, Voronoi overlays, views—but there’s so much more we didn’t cover! For starters, we didn’t even mention D3’s reusable behaviors: [brushing](https://github.com/d3/d3-brush), [zooming](https://github.com/d3/d3-zoom), and [dragging](https://github.com/d3/d3-drag). (For self-directed study, find examples in the [D3 gallery](/@d3/gallery) and [collections](/@d3?tab=collections).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"在本教程中，我们猛烈地介绍了各种交互技术（提示工具、事件监听、Voronoi叠加、视图），但还有很多我们没有涵盖的内容！对于初学者，我们甚至没有提及D3的可重用行为：[brushing](https://github.com/d3/d3-brush)、[zooming](https://github.com/d3/d3-zoom)和[dragging](https://github.com/d3/d3-drag)。（对于自助学习，请在 [D3 gallery](/@d3/gallery) 和 [collections](/@d3?tab=collections)中寻找示例。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"In fact, now that we’ve covered the basics, it’s a good time to step back and reflect on where to go from here.\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"---\n\n## Appendix\n\nFor more on interaction, read Gregor Aisch’s [defense of interactive graphics](https://www.vis4.net/blog/2017/03/in-defense-of-interactive-graphics/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"data = FileAttachment(\"aapl-bollinger.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"line = d3.line().x(d => x(d.date)).y(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.upper)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"formatDate = d3.utcFormat(\"%b %-d, ’%y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"formatClose = d3.format(\"$.2f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"