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

3f:null 40:["$","title",null,{"children":"8_Learn D3: Interaction | onepisya | Observable"}] 46:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1660580279153.182,"size":48822}] 44:{"id":"69189470b09aae72","slug":"8_learn-d3-interaction","title":"8_Learn D3: Interaction","thumbnail":"a79e5c7cd12b8ab0b137d1f06c4b4a7a6386facb92fbf9d1049d11eebcd5fde7","access_level":"public","create_time":"$D2022-08-15T16:17:59.153Z","update_time":"$D2022-08-19T07:34:47.558Z","view_time":null,"first_public_time":"$D2022-08-15T16:18:19.235Z","has_unpublished_edits":null,"fork":{"id":"78807d1c5e2d1bcd","slug":"learn-d3-interaction","title":"Learn D3: Interaction","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":1,"starred":false,"owner":{"type":"team","id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":"starter_2024","bio":"","following":false},"version":1367,"publish_version":1367,"role":null,"authored":false,"authors":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"821368b74f0848d2","login":"onepisya","name":"onepisya","avatar_url":"https://avatars-next.observableusercontent.com/f153ff05aa3994274d5a61ed6d97bdf9e0a9ab1fe7549a7e79705384d2fc880a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d75b5bb613c35fe2","slug":"d3learn","title":"D3Learn","owner":{"id":"0fe483e8c08c0572","login":"onepisya","name":"onepisya"}},"type":"notebook","body":{"titling":"auto","title":"8_Learn D3: Interaction","cells":[{"id":34,"value":"# 8_Learn D3: Interaction\n\n几乎总是有太多的信息，无法合理地用一张图表来合适的表达。\n\n因此，设计不仅是决定 **如何** 展示某物，而且还根据我们认为对想象中的读者 **重要的内容** 来决定 **显示的内容** 以及 **不显示的内容**。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"多亏了计算机， *actual* 实际上读者现在可以发表意见：可以根据需要根据读者的兴趣量身定制图形。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"然而，这种力量是一把双刃剑。互动性使读者能够浮出更多信息，但迫使读者为此而努力。\n> 如果我们不小心，我们可能会隐藏某个控件背后的重要见解，因为读者可能永远不会单击那个控件。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"如果我们的意图是传达一些已知的内容，我们就应该在考虑 **交互** 之前设计一个有效的静态图像。\n\n另一方面，如果我们寻求探索未知，那么互动可能比编码新图形更快（但还考虑可视化语法探索语法，例如 [Vega-Lite](https://vega.github.io/vega-lite/)）！\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"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.*\n\n> *首先 overview 概述, \n> zoom缩放 and filter过滤, \n> 按需提供详细信息。*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"概述是图形的初始形式，它的目的不是显示一切（这是不可能的），但是要对所有数据提供“macro宏”视图。\n\n> 概述是指导读者探索的地图。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"*Zooming* and *filtering* 是剔除显示内容的方法，以便集中在感兴趣的主题上。\n\n我们之前看到了将图表裁剪到单个年份的控制;\n> 还有[free-form zooming 自由行使的缩放](/@d3/zoomable-area-chart)，[panning 平移](/@d3/pannable-chart) and [聚焦focus + 上下文context](/@d3/focus-context)。如果要比较多个时间序列，我们可能需要像[多折线图 multi-line chart example](/@d3/multi-line-chart) 中那样进行过滤。\n\nSee 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":702,"value":"**需求的详细信息** 使读者可以从图表中提取精确值,而不是仅限于视觉 *近似值* 这可以像*工具提示 tooltips*一样简单","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"工具提示的一种方法是将标题元素自由地撒入SVG中。鼠标（并短暂地等待）以下面的特定日期查看Apple股票价格。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"上图中，${(data.length - 1).toLocaleString(\"en\")} 个不可见的矩形元素垂直地跨越图表，水平地跨越相邻的数据点(使用 [d3.pairs](https://github.com/d3/d3-array/blob/master/README.md#pairs) 计算)。\n当鼠标悬停在一个矩形上时，子 title 元素的文本将显示出来。\n因此，显示的工具提示是 **鼠标x位置** 的函数，这最适合于 **y为因变量** 的时间序列图表。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"一种更通用的方法是[Voronoi overlay](https://github.com/d3/d3-delaunay)，其中最接近的数据指向鼠标确定工具提示。（为了清楚起见，在下面绘制了Voronoi图，并且由于看起来很酷。您通常不会显示它。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"voronoi = d3.Delaunay.from(\n data,\n (d) => x(d.date),\n (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** 提示有几个缺点：它们可能会出现迟钝；移动浏览器不支持它们；而且并不总是很明显哪个数据点与工具提示相关联，尤其是在使用 Voronoi 图时。\n\n但是，有了更多的工作，我们可以拥有自定义工具提示。\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"## 下面是一个更推荐的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 console.log(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":"这里的元素排序很重要：SVG不支持 *z*-order，因此要在线line和轴axes的顶部绘制工具提示(tooltips)，必须在最后面绘制。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"**Native tooltips** 会自动出现，而自定义工具提示通常需要事件监听器(event listeners)。当用户执行某个操作(比如将鼠标移到元素上)时，浏览器将调用这些函数。\n\n上面的侦听器捕获闭包中的数据(a和b)，以知道在触发事件时显示什么。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"自定义工具提示在下面的类中实现。它会显示一个工具提示 **tooltip**。node属性(一个SVG g 元素)和工具提示。显示工具提示 **tooltips**。隐藏方法以根据需要更新工具提示。这在如何触发工具提示方面提供了一些灵活性。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"上面的图表使用了[hypertext literal](/@observablehq/htl) ，但是我们可以以D3样式实现相同的图表。使用任何您喜欢的！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1337,"value":"## 次优推荐的方式，但是当图太复杂的时候，会有性能问题","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":1344,"value":"# 性能优化","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":511,"value":"由 mouseover 事件触发的 **工具提示** 可能很昂贵：它们需要为图表的每个可悬停区域使用单独的元素。对于复杂的图表，您可以通过 **计算按需悬停的内容来提高性能**\n\n对于按一个维度排序的数据，例如我们的时间序列数据，一种特别有效的方法是 [bisection](https://observablehq.com/@d3/d3-bisect) on *mousemove* 。\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"二分法找到最接近鼠标的值（沿 *x* ）。\n\n下面的函数首先计算距离指定日期最近的数据点的索引（假设数据按升序排序），然后返回关联的数据。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"上面的所有示例都演示了*局部* 交互：与图表交互只会影响图表本身。Observable最令人兴奋的方面之一是，语言级的 *反应性 reactivity* 使得一个单元格中的交互很容易波及到笔记本中的任何其他单元格以进行 **全局** 交互！\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"Observable 中的大多数交互式控件都作为 [views视图](/@observablehq/introduction-to-views)实现。若要创建视图，请定义一个返回 HTML 输入元素的 viewof 单元格。然后，输入的实时当前值将公开给笔记本的其余部分。\n\n例如，这是一个由范围输入控制的数字。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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`同样，这里有一个文本输入，它在您键入时显示其值，以及一个用于选择多个固定选项之一的下拉菜单。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"虽然上述输入是手动实现的，但在 Observable 上我们更经常使用 [Observable Inputs](/observablehq/inputs)，它提供了标签和格式等便利。\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"（还记得之前我们看到 generators for [animation](/@d3/learn-d3-animation?collection=@d3/learn-d3)的时候吗？这些视图(views)也涉及生成器：当您使用 viewof 运算符时，Observable 会隐式创建一个 [asynchronous input generator](https://github.com/observablehq/stdlib/blob/master/README.md#Generators_input)，每当您与视图交互时，该生成器都会生成一个新值。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"但是视图不限于 HTML 输入——它们可以是任何东西！唯一的要求是视图公开一个 **value** 属性并在该值更改时发出 **input** 事件。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"甚至图表也可以是视图(views)。下图在鼠标移动时[调度综合输入事件dispatches synthetic input events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events)。\n\n将鼠标悬停在下面的图表上以检查值。\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":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":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":"我们在本教程中介绍了各种交互技术。**event listeners, Voronoi overlays, views**\n\n但还有很多我们没有涵盖的内容。\n\n首先我们甚至没有提到D3的可重用行为：[brushing](https://github.com/d3/d3-brush), [zooming](https://github.com/d3/d3-zoom), and [dragging](https://github.com/d3/d3-drag).对于自学, 可以在 [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":114,"value":"事实上，既然我们已经介绍了基础知识，现在是退一步思考从这里开始的好时机。\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\n有关交互的更多信息, 可以阅读 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":"$W46","stdlib":"1"}} 45:"$44:body"