3e:null 3f:["$","title",null,{"children":"Learn D3: Animation | weifeng.zhang | Observable"}] 45:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1666660846596.079,"size":48822}] 43:{"id":"48aa9fd007b1ed74","slug":null,"title":"Learn D3: Animation","thumbnail":"6caa9e859704da4615b91ab7759d2684deebca69c1c761035af57e59b1dcafb7","access_level":"public","create_time":"$D2022-10-25T01:20:46.596Z","update_time":"$D2022-10-26T10:01:55.740Z","view_time":null,"first_public_time":"$D2022-10-25T01:20:46.596Z","has_unpublished_edits":null,"fork":{"id":"de13bdb9fdabe52a","slug":"learn-d3-animation","title":"Learn D3: Animation","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":1628,"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: Animation","cells":[{"id":168,"value":"# Learn D3: Animation\n\nUnlike graphics drawn on paper, computer graphics needn’t be static; like Frankenstein’s monster, they can come alive through animation! ✨","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1533,"value":"不像在纸上绘制图形，电脑图像不必是静态的；就像弗兰肯斯坦的怪物，他们可以通过动画变活！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":599,"value":"viewof replay = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"{\n replay; // references the button above, causing this cell to run on click\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":0,"value":"The line chart above reveals progressively. This is somewhat gratuitous—motion should be used sparingly as it commands attention—but it at least reinforces that *x* represents time and introduces a touch of suspense to an otherwise ho-hum chart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"上面的折线图逐渐显示。这有点无用，运动应该谨慎使用，因为它会引起人们的注意，但至少她强化了 *x* 代表时间，并为其他嗡嗡作响的图表引入了一丝悬念。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"The code here is similar to the axis rendering we saw previously: we select an SVG path element, call a function (*reveal*) to apply a transition, and lastly embed the element in the HTML template literal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"这里的代码类似于之前看到的坐标轴渲染：我们选择了一个 SVG path 元素，调用了一个函数（*reveal*）来应用过渡，最后将元素嵌入到HTML模板文本中。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"reveal = path => path.transition()\n .duration(5000)\n .ease(d3.easeLinear)\n .attrTween(\"stroke-dasharray\", function() {\n const length = this.getTotalLength();\n return d3.interpolate(`0,${length}`, `${length},${length}`);\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"Before we get into the minutiae of techniques, though, let’s take a step back to think about animation more generally.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"不过，在我们进入技术的细节之前，让我们退一步，更广泛地考虑一下动画。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":268,"value":"An animation is not a single graphic but a *sequence* of graphics over time. This sequence can be represented as a cell (or function) that returns the graphic for a given time *t*. For simplicity, we often use normalized time where *t* = 0 is the start of the animation and *t* = 1 is the end.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1546,"value":"动画不是单个图形，而是随时间推移的图形序列。此序列可以表示为返回给定时间 *t* 的图形的单元格。简单来说，我们通常使用归一化时间，其中 *t* = 0是动画的开始， *t* = 1 是结束。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":317,"value":"viewof t = Scrubber(d3.ticks(0, 1, 200), {\n autoplay: false,\n loop: false,\n initial: 0,\n format: x => `t = ${x.toFixed(3)}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"lineLength = htl.svg``.getTotalLength()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"Our cell could theoretically return *any* graphic for a given time *t*, but often the graphic for time *t* is similar to the one for time *t* + ϵ. This similarity from frame to frame helps the viewer follow along. (Above, only the stroke-dasharray attribute animates; the rest of the graphic remains constant.) Hence, continuous animations are often defined by discrete keyframes with intermediate frames generated by interpolation, or [*tweening*](https://en.wikipedia.org/wiki/Inbetweening).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1552,"value":"我们的单元格理论上可以根据给出的 *t* 返回 *任意* 图形，但是通常情况下，时间为 *t* 的图与时间为 *t* + ϵ 的图类似。这种从一帧到另一帧的相似性有助于观看者跟随。（上面图中，只有 stroke-dasharray 属性会进行动画处理，图形的其余部分保持不变。）因此，连续动画通常由离散的关键帧定义，中间帧由插值或[*补间*](https://en.wikipedia.org/wiki/Inbetweening)生成。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":388,"value":"Consider the stroke-dasharray attribute. It is two comma-separated numbers: the first is the length of the dash, and the second the length of the gap between dashes. If the dash length is zero, then the line will be invisible; if the dash length is as long as the line, then the line will be unbroken. By adjusting the dash length and keeping the gap at least as long as the line, we can control how much of the line is stroked. And we only need two keyframes: a zero-length dash and a line-length dash.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1557,"value":"考虑 stroke-dasharray 属性。它是两个由逗号分离的数字：第一个是dash的长度，第二个是dash间的间隔长度。如果dash长度为0，那么折线不可见；如果dash长度与折线一样，那么折线不会有断开。通过调整dash长度和保持间隔与折线一样长，我们可以控制折线描边的长度。并且我们只需要两个关键帧：零长的dash和折线长的dash。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":771,"value":"To assist with animation (among other uses), D3 provides [interpolators](/collection/@d3/d3-interpolate). The most generic of these, [d3.interpolate](/@d3/d3-interpolate), accepts numbers, colors, strings-of-numbers, and even arrays and objects. Given a *start* and *end* value, d3.interpolate returns a function that takes a time 0 ≤ *t* ≤ 1 and returns the corresponding inbetween value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1560,"value":"为了辅助动画（除其他用途外），D3 提供了[插值 interpolators](/collection/@d3/d3-interpolate)。最常用的是 [d3.interpolate](/@d3/d3-interpolate)，它接受数字、颜色、数字字符串、甚至数组和对象。给定一个 *开始* 和 *结束*，d3.interpolate 返回一个函数，它接受一个时间 0 ≤ *t* ≤ 1，返回对应的中间值。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":393,"value":"strokeDasharray = d3.interpolate(`0,${lineLength}`, `${lineLength},${lineLength}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"strokeDasharray(t)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"When defining a transition, you can either specify the interpolator explicitly (as above using [*transition*.attrTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween)) or let D3 choose (using [*transition*.attr](https://github.com/d3/d3-transition/blob/master/README.md#transition_attr) or [*transition*.style](https://github.com/d3/d3-transition/blob/master/README.md#transition_style)). Being explicit allows more advanced interpolation methods such as [zooming](/@d3/d3-interpolatezoom), [gamma-corrected RGB blending](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate_gamma), or even [shape blending](/@mbostock/hello-flubber).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1569,"value":"定义过渡时，你可以显式指定插值器（例如上面使用 [*transition*.attrTween](https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween)）也可以让D3选择（使用[*transition*.attr](https://github.com/d3/d3-transition/blob/master/README.md#transition_attr)或[*transition*.style](https://github.com/d3/d3-transition/blob/master/README.md#transition_style)）。显式允许使用更高级的插值方法，比如[缩放](/@d3/d3-interpolatezoom)、[伽马校正RGB混合](https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate_gamma)，甚至是[形状混合](/@mbostock/hello-flubber)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":595,"value":"ramp(d3.interpolateRgb(\"steelblue\", \"orange\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"ramp(d3.interpolateRgb.gamma(2.2)(\"steelblue\", \"orange\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"Animation is more than interpolation, however: it’s also timing. We need to redraw sixty times a second, and to compute the normalized time *t* based on real time and the desired start time and duration of the animation.\n\nWe’ve seen two timing methods so far.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"然而，动画不止有插值，还有时间。我们需要每秒重绘60次，并根据实时和动画期望的开始时间和持续时间计算标准化后的时间*t*。\n\n目前，我们已经看过两个缓动方法。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1211,"value":"The first relies on D3’s transitions, creating an initial graphic and then starting a transition to modify it (interpolating the stroke-dasharray).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1591,"value":"第一个依赖于 D3 的过渡，创建一个最初的图，然后开启过渡来更改它（插值 stroke-dasharray）。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":635,"value":"The second relies on Observable’s dataflow, recreating the graphic whenever the referenced *t* changes and relying on a [scrubber](/@mbostock/scrubber) for timing. This is less efficient than the previous method because the graphic is created from scratch each frame, but easier to write.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1593,"value":"第二个依赖于 Observable 的数据流，每当引用的 *t* 变更时重新创建图形，并依靠缓动的清理器。这比前一个方法效率低，因为图形在每个帧从头开始创建，但更容易编写。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":886,"value":"Observable has another powerful tool for controlling animation: [*generators*](/@observablehq/introduction-to-generators). When a generator cell yields a value, its execution is suspended until the next animation frame, up to sixty times per second. The yielded value can be as simple as an integer—or it can be an incrementally-updating SVG element!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1595,"value":"Observable 还有另一个强大的动画控制工具：[*generators*](/@observablehq/introduction-to-generators)。当一个生成器单元格生成了一个值，它的执行会进入等待，直到下一动画帧，最高每秒60次。生成值可以像整数一样简单，或者可以是一个增量更新的SVG元素！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":645,"value":"viewof replay2 = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"{\n replay2; // reference the button so this cell re-runs on click\n for (let i = 0, n = 300; i < n; ++i) {\n yield i;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"{\n replay2; // reference the button so this cell re-runs on click\n\n const path = htl.svg``;\n\n const chart = htl.html``;\n\n for (let i = 0, n = 300; i < n; ++i) {\n const t = (i + 1) / n;\n path.setAttribute(\"stroke-dasharray\", `${t * lineLength},${lineLength}`);\n yield chart;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"Given the variety of possible approaches to animation in Observable, which should you use? It depends!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1600,"value":"考虑到Observable的动画可以多种方式，应该使用哪种方式？这要视情况而定！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1260,"value":"If the graphic is simple enough that you can recreate it from scratch each frame—or if you don’t actually need animated transitions—then write the graphic declaratively. In other words, do nothing! Thanks to Observable’s dataflow, a “static” graphic can be made responsive, interactive, or animated without changing its code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1602,"value":"如果图形足够简单，你可以每一帧都从头开始重新创建（或者你不是真正需要动画过渡），那就直接声明式编写图形。换句话说，什么都不做！得益于Observable的数据流，一个“静态”的图可以在不更改其代码的情况下变得可响应、可交互或可动画。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":924,"value":"On other hand, for dynamic graphics of greater complexity—where performance necessitates efficient incremental updates—employ transitions or generators.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1605,"value":"另一方面，对于更加复杂的动态图形（性能需要高效的增量更新）使用过渡或生成器。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":894,"value":"You can also combine approaches. The graphic below is initially static, but exposes a *chart*.update method to transition to a given *x*-domain; this method is called by another cell when the selected value of the radio input changes. (This code is written using d3-selection rather than HTML template literals, but the graphic structure is the same as earlier examples, so try inferring the code’s meaning by comparison.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1608,"value":"你也可以结合多种方法。下面的图最初是静态的，只暴露了一个 *chart*.update 方法来过渡一个给定的 *x*-域；这个方法在单选框更改时被调用。（这个代码使用 d3-selection 编写，而不是 HTML 模板文本，但是图形结构与之前的例子相同，所以尝试通过比较来推断代码含义。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":685,"value":"viewof timeframe = Inputs.radio(new Map([\n [\"All\", d3.extent(data, d => d.date)],\n [\"2009\", [new Date(\"2009-01-01\"), new Date(\"2010-01-01\")]],\n [\"2010\", [new Date(\"2010-01-01\"), new Date(\"2011-01-01\")]],\n [\"2011\", [new Date(\"2011-01-01\"), new Date(\"2012-01-01\")]],\n]), {key: \"All\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto; height: intrinsic;\");\n\n const zx = x.copy(); // x, but with a new domain.\n\n const line = d3.line()\n .x(d => zx(d.date))\n .y(d => y(d.close));\n\n const path = 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 const gx = svg.append(\"g\")\n .call(xAxis, zx);\n\n const gy = svg.append(\"g\")\n .call(yAxis, y);\n\n return Object.assign(svg.node(), {\n update(domain) {\n const t = svg.transition().duration(750);\n zx.domain(domain);\n gx.transition(t).call(xAxis, zx);\n path.transition(t).attr(\"d\", line(data));\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"update = chart.update(timeframe)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"By exposing one or more update methods, a chart can selectively animate transitions for specific value changes. If anything else changes, the chart falls back to passive reactivity and is redrawn from scratch.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1617,"value":"通过暴露一个或多个更新方法，一个图可以有选择地为特定值更改的过渡添加动画效果。如果其他任何东西更改了，图表将回退到被动反应性并从头开始绘制。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1081,"value":"(If you’re wondering: you could define the update in a separate cell rather than exposing it as a method. However, this is not advised because editing the update code would not redraw the chart from scratch, which might result in nondeterministic behavior. 😱 And by defining the update within the chart cell, it can access local variables that persist across updates.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1619,"value":"（如果你想知道：你可以在一个单独的单元格定义更新而不是作为方法暴露它。然而，这是不推荐的，因为编辑更新代码不会从头重绘图表，它会导致不确定的行为。而且通过在图表单元格中定义更新，它可以访问在更新过程中持续存在的局部变量。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1448,"value":"This example demonstrates another handy feature of D3 axes: by switching to [*transition*.call](https://github.com/d3/d3-transition/blob/master/README.md#transition_call) instead of *selection*.call, the change in the *x*-axis is now animated rather than instantaneous, and synchronized with the transitioning path!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1623,"value":"这个例子演示了D3轴的另一个方便功能：通过使用 [*transition*.call](https://github.com/d3/d3-transition/blob/master/README.md#transition_call) 而不是 *selection*.call，*x*轴的变更现在是动画而不是瞬时的，并与过渡路径同步。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1390,"value":"The animations above conveniently involve only a single element: the chart’s line. What if you want to animate multiple elements? And what if the set of elements changes over time, with new elements entering and old elements exiting? Read on!\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"上面的动画方便地只涉及一个元素：图表的折线。如果要对多个元素进行动画处理怎么办？如果元素集随时间而变化，新元素加入，旧元素退出怎么办？请继续阅读！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"---\n\n## Appendix\n\nIf you’re interested in designing effective animations, I highly recommend reading Heer and Robertson’s 2007 paper, [*Animated Transitions in Statistical Data Graphics*](http://vis.berkeley.edu/papers/animated_transitions/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"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":74,"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":68,"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":69,"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":60,"value":"xAxis = (g, scale = x) => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(scale).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":61,"value":"yAxis = (g, scale = y) => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(scale).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":63,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"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"},{"id":315,"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":582,"value":"import {ramp} from \"@mbostock/color-ramp\"","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"