3f:null 40:["$","title",null,{"children":"6_Learn D3: Animation | onepisya | Observable"}] 46:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1660580141023.453,"size":48822}] 44:{"id":"42de3d9f50a6ae26","slug":"6_learn-d3-animation","title":"6_Learn D3: Animation","thumbnail":"69c63801505223859684f2d4332a228c394e3430961e797d2bded186ac183101","access_level":"public","create_time":"$D2022-08-15T16:15:41.023Z","update_time":"$D2022-08-17T05:53:52.226Z","view_time":null,"first_public_time":"$D2022-08-15T16:15:59.327Z","has_unpublished_edits":null,"fork":{"id":"de13bdb9fdabe52a","slug":"learn-d3-animation","title":"Learn D3: Animation","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":1570,"publish_version":1570,"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":"6_Learn D3: Animation","cells":[{"id":168,"value":"# 6_Learn D3: Animation\n\n与纸上绘制的图形不同，计算机图形不必是静态的。就像科学怪人的怪物一样，它们可以通过动画来生动！✨","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"上面的线图(line chart) 逐渐揭示。\n\n> 这是一种不必要的运动，应该谨慎使用，因为它吸引了注意力，但它至少强化了 x 代表时间，并为单调的图表引入了一丝悬念。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"此处的代码类似于我们之前看到的轴 axis 渲染：我们选择一个SVG路径(path) 元素，调用函数（显示 *reveal* ）应用过渡(transition)，最后将元素嵌入HTML模板文字(htl)中。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"不过，在我们进入技术细节之前，让我们退后一步，更广泛地考虑动画。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"动画不是一个图形，而是一 *系列 sequence* 图形。该序列可以表示为返回给定时间 `t` 的图形的单元格(cell)（或函数(function)）。为简单起见，我们经常使用归一化的时间(normalized time)，其中 *t* = 0 是动画的开始，而 *t* = 1 是末尾。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":true,"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":"理论上我们的单元格可以返回给定时间 `t` 的任何图形，但是时间 `t` 的图形通常类似于时间 *t* + ϵ 的图形。从框架到框架的相似性有助于观看者跟随。（上面，只有stroke-dasharray属性动画；其余图形保持恒定。）因此，连续动画通常由离散的 `关键帧` 定义，该 `关键帧` 具有通过 *interpolation 插值*或补间[*补间 tweening*](https://en.wikipedia.org/wiki/Inbetweening)产生的中间帧(intermediate frames)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"考虑 stroke-dasharray 属性。\n\n它是两个逗号分隔的数字:第一个是破折号(dash)的长度，第二个是破折号(dash)之间的距离的长度。如果虚线长度(dash length) 为零，那么这条线将是不可见的;\n\n如果虚线长度(dash length)和直线一样长，那么直线将是连续的。通过调整破折号的长度(dash length)，并保持缺口(keep the gap)至少与直线一样长，我们可以控制直线的描划量(line is stroked)。\n\n我们只需要两个关键帧:零长度(zero-length)的破折号(dash)和一行长度(line-length)的破折号(dash)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"为了协助动画（除其他用途），D3提供了 [插值器 interpolators](/collection/@d3/d3-interpolate). 其中最通用的是 , [d3.interpolate ](/@d3/d3-interpolate), accepts numbers, colors, strings-of-numbers, even arrays 和 objects。\n\n给定一个 *start* 和 *end* 值, d3.interpolate 返回一个 time 为 0 ≤ *t* ≤ 1 的函数，并且返回值之间的相应内部值。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"定义过渡(transition)时，您可以明确指定 `interpolator`（使用 [*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) or [*transition*.style](https://github.com/d3/d3-transition/blob/master/README.md#transition_style)）。被显式允许更高级的插值方法，例如 [缩放 zooming](/@d3/d3-interpolatezoom), [通过伽马校正的RGB混合 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":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":"但是，动画不仅仅是插值(interpolation)：这也是时机(timing)。我们需要每秒重新绘制六十次，并根据实时以及动画的所需启动时间(start time)和持续时间(duration of the animation)来计算标准化时间 *t*。\n\n到目前为止，我们已经看到了两种定时方法(timing methods)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"第一个依赖于D3的过渡(transitions)，创建一个初始图形，然后开始一个过渡(trnasition) 来修改它 (interpolation the stroke-dasharray)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"第二个依赖于 Observables's dataflow，每当引用 **t** 更改并依靠[洗涤器 scrubber](/@mbostock/scrubber)进行计时时，重新创建图形。这比上一个方法(previous method) 效率较低，因为图形是从 scratch 中逐帧创建的，但更易于编写。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"`Observale` 有另一个用于控制动画的功能强大的工具：[**generators**](/@observablehq/introduction-to-generators)。当发 `generator cell` 得出一个值时，其执行将被暂停(suspended)，直到下一个动画帧为止，每秒最多六十次。产出(yielded)的值可以像整数一样简单，也可以是逐步升级的SVG元素！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"考虑到 `Observable` 中各种各样可能的动画制作方法，你应该使用哪一种?这取决于","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"如果图形(graphic) 足够简单，您可以在每一帧从头重新创建它，或者如果您实际上不需要动画转换(animated transitions)，那么就以声明的方式编写图形(graphic declaratively)。\n\n换句话说，什么都不做!得益于Observable的数据流(datafolow)，一个静态图形(static graphic) 可以被做成响应式(responsive)、交互式(interactive)或动画(animated)，而不需要改变它的代码。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"另一方面，对于更大的复杂性的动态图形(dynamic graphics) 性能需要有效的增量更新，那么使用 `transition` 或 `generators`。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"您还可以结合使用各种方法。下面的图表最初是静态的，但公开(exposes) 了一个图表。\n\n更新方法转换到给定的 *x*-domain; 当单选输入的选定值发生变化时，另一个单元格调用此方法。\n\n(此代码是使用 `d3-selection` 而不是HTML模板文字(`htl`) 编写的，但图形结构与前面的示例相同，因此尝试通过比较推断代码的含义。)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":true,"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":"通过公开一种或多种更新方法(update methods)，图表可以选择性地为特定值变更(change) 进行动画转换(transitions)。如果其他任何东西变化，图表将落后于被动反应性(passive reactivity)，并从头开始重新绘制。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"（如果您想知道：您可以在单独的单元格中定义更新，而不是将其视为一种方法。但是，这不建议您，**因为编辑更新代码不会从头开始重新绘制图表，这可能会导致非确定性行为**。\n\n😱并且通过定义图表单元格中的更新，它可以访问跨更新持久化的局部变量。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1448,"value":"这个例子展示了D3轴的另一个方便的特性:通过切换(switching)到[*transition*.call](https://github.com/d3/d3-transition/blob/master/README.md#transition_call) 而不是 *selection*.call 时，x轴上的变化现在是动画的，而不是瞬时的，并与过渡路径(transitioning path)同步","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1390,"value":"上面的动画很方便地只涉及一个元素:图表的直线(chart's line)。如果要对多个元素进行动画处理呢?如果元素集合随时间变化，新元素进入，旧元素退出，该怎么办?继续读下去\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"---\n\n## Appendix\n\n如果您有兴趣设计有效的动画，我强烈建议您阅读 **Heer** 和 **Robertson** 的2007年论文，[*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":"$W46","stdlib":"1"}} 45:"$44:body"