3e:null 3f:["$","title",null,{"children":"Learn D3: Joins | weifeng.zhang | Observable"}] 45:T566,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); // For the initial render, reference the current age non-reactively. const agedata = viewof agedata.value; const x = d3.scaleLinear() .domain([0, d3.max(agedata, d => d.value)]) .rangeRound([margin.left, width - margin.right]); const y = d3.scaleBand() .domain(agedata.map(d => d.name)) .rangeRound([margin.top, margin.top + 20 * data.names.length]); let bar = svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(agedata, d => d.name) .join("rect") .style("mix-blend-mode", "multiply") .attr("x", x(0)) .attr("y", d => y(d.name)) .attr("width", d => x(d.value) - x(0)) .attr("height", y.bandwidth() - 1); const gx = svg.append("g") .call(xAxis, x); const gy = svg.append("g") .call(yAxis, y); return Object.assign(svg.node(), { update(agedata) { const t = svg.transition().duration(750); gx.transition(t) .call(xAxis, x.domain([0, d3.max(agedata, d => d.value)])); gy.transition(t) .call(yAxis, y.domain(agedata.map(d => d.name))); bar = bar .data(agedata, d => d.name) .call(bar => bar.transition(t) .attr("width", d => x(d.value) - x(0)) .attr("y", d => y(d.name))); } }); }46:[{"id":"81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","href":"https://static.observableusercontent.com/files/81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","name":"us-population-state-age.csv","type":"text/csv","lastModified":1666778756015.552,"size":3516}] 43:{"id":"3dc70619bfda566d","slug":null,"title":"Learn D3: Joins","thumbnail":"2c2194882b24533255ce6b6c60b82541a7c69aa1a07fb30acb50f845aa2574f4","access_level":"public","create_time":"$D2022-10-26T10:05:56.015Z","update_time":"$D2022-10-27T03:12:26.145Z","view_time":null,"first_public_time":"$D2022-10-26T10:05:56.015Z","has_unpublished_edits":null,"fork":{"id":"4fed9b9938ac2369","slug":"learn-d3-joins","title":"Learn D3: Joins","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":1187,"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: Joins","cells":[{"id":240,"value":"# Learn D3: Joins\n\nIf you were familiar with D3 going into this tutorial, you may be surprised by how little D3 selections have been mentioned.\n\nThat’s because you might not need them!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"D3 selections fill a particular niche: fast, incremental updates of dynamic graphics. If your focus is on static graphics, or graphics that can be redrawn from scratch each frame, you may prefer a different abstraction. On the other hand, if you want animated transitions or to squeeze the best performance out of modern browsers, selections are for you.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"D3 选择填补了一个特定的市场：快速增量更新动态图。如果你专注于静态图，或每帧从头重绘整个图，你可能会选择一个不同的抽象。另一方面，如果你想要动画过渡或者榨取现代浏览器最好的性能，选择正是为你准备的。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":685,"value":"(Even if you decide not to use selections, remember that D3 has myriad other useful tools for visualization. Scales, shapes, interpolators, colors, map projections, and many other features, can be used with Canvas, WebGL, or other DOM abstractions such as Observable’s HTML tagged template literal, React, or Svelte. And D3 can assist with data cleaning and analysis, with methods for statistics, grouping and aggregation, time series and parsing.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"（即使你决定不使用选择，记住D3还有很多其他有用的用于可视化的工具。scales、shapes、interpolators、colors、map projections 和许多其他特性，可以被用于Canvas、WebGL或其他DOM的抽象，比如Observable的HTML标签模板文本、React或Svelte。而且D3可以通过统计、分组和聚合、时间序列和解析方法辅助数据清洗和分析。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":302,"value":"At heart, D3 selections specify *transformation* rather than *representation*. Instead of expressing the desired state of the graphic (the DOM), you specify the changes (insertions, updates, and deletions) needed to transform the current state into the desired state. This is sometimes tedious but allows you to animate transitions and to minimize changes to the DOM, improving performance.\n\nLet’s see how.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"从本质上讲，D3选择是指*变换*而不是*呈现*。不是表示图（DOM）的预期状态，而是指定当前状态转换为预期状态所需要的更改（插入、更新和删除）。这有时很繁琐，但允许你对过渡进行动画处理，并最大限度地减少对DOM的更改，从而提高性能。\n\n有点类似于Vue和jQuery的区别","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":435,"value":"Say we want to show the letters of the alphabet. Not much of a visualization, but we’ll keep things simple to focus on technique. (For real-world examples, see the animation and interaction sections of the [D3 gallery](/@d3/gallery).)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"假设我们要显示字母表中的字母。没有太多可视化内容，但是我们将保持简单来专注于技术。（有关实际示例，请参阅 [D3 gallery](/@d3/gallery) 中动画和交互章节。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":326,"value":"alphabet = [...\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"chart1 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n svg.selectAll(\"text\")\n .data(alphabet)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 17)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\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":335,"value":"This graphic is static in the sense that it is created from scratch each time the cell runs, making the D3 code equivalent in spirit to an HTML literal.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"这个图在场景中是静态的，每次单元格运行时都会从头创建，这让D3代码在精神上等同于HTML文本。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"So why bother with selections? Well, for a static graphic, there’s little reason to.\n\nBut say you want to update this chart in response to changing data. And say you *don’t* want to redraw it from scratch—you want to apply the minimal set of updates to reflect the new data. You want to reuse existing elements, adding what you need, and removing what you don’t. Merely by moving the above code into a method that is called when the data changes, you get performant incremental updates! 😲","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"那么为什么要为选择而感到烦恼呢？好吧，对于静态图，没有理由。\n\n但是，假设您要更新此图表以响应不断变化的数据。假设您不想从头开始重绘它-你想应用最小的更新集来反映新数据。您希望重用已经存在的元素，添加你所需要的，并且删除不需要的。只需将上述代码移动到数据更改时调用的方法中，即可获得高性能的增量更新！😲","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":342,"value":"randomLetters = {\n while (true) {\n yield d3.shuffle(alphabet.slice())\n .slice(Math.floor(Math.random() * 10) + 5)\n .sort(d3.ascending);\n await Promises.delay(3000);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"chart2 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n text = text\n .data(letters)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 17)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"chart2.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"Let’s break down the code.\n\n*text* is a selection of text elements, initially empty, whose parent is the SVG element. This parent determines where entering text elements will be appended later.\n\nBy calling *selection*.data, *text* is bound to a new array of data, *letters*. This computes three disjoint subsets of the *text* selection: the *enter* selection representing new data for which there is no existing element; the *update* selection representing existing elements for which there is new data; and the *exit* selection representing existing elements for which there is no new data.\n\nAs a Venn diagram:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1127,"value":"让我们拆解下代码。\n\n*text* 是文本元素的选择，最初是空的，它的父级是SVG元素。这个父元素决定新元素在哪里被插入。\n\n通过调用 *selection*.data，*text*绑定到一个新的数组 *letters*。这将计算 *text* 选择的三个不相交的子集：*enter* 选择代表了原来不存在的元素的新数据；*update* 选择代表了有新数据的现有元素；*exit* 选择代表了没有新数据的已有元素。\n\n就像韦恩图：","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"

\n \n

The three selections computed by the selection.data.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"(These selections are hidden in the code: *selection*.data returns the *update* selection, from which you can call *selection*.enter or *selection*.exit to access the others.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"（这些选择隐藏于代码中：*selection*.data 返回了 *update* 选择，你可以通过它调用 *selection*.enter 或 *selection*.exit 来访问其他的选择。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"We could handle these three cases manually, but [*selection*.join](/@d3/selection-join) provides convenient defaults. The *enter* selection is appended; the *exit* selection is removed; and lastly the *update* and *enter* selections are merged, ordered and returned. We can then assign attributes and text on these entering-or-updating elements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1134,"value":"我们可以手动处理这三种情况，但是 [*seleciton*.join](/@d3/selection-join) 提供了便捷的默认行为。*enter* 选择被添加；*exit* 选择被移除；最终 *update* 和 *enter* 选择被合并、排序和返回。稍后我们可以赋值属性和文本到这些新增或更新元素上。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"We can be even more efficient by observing that we don’t need to reassign some attributes and text content on updating elements as long as the association between letter and text element remains constant. To preserve this association, *selection*.data needs a key function; and for precise operations on *enter*, *update*, and *exit*, *selection*.join needs corresponding functions. If updates are more common than enters and exits, this can greatly improve performance!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"通过观察我们不需要在更新元素时重新分配某些属性和文本内容，只要字母和文本元素之间的关联保持不变，我们就可以提高效率。为了保持这种关联，*selection*.data需要一个键函数；为了精确操作 *enter*、*update* 和 *exit*，*selection*.join 需要相应的函数。如果更新比进入和退出更常见，这可以大大提高性能。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":357,"value":"chart3 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n text = text\n .data(letters, d => d)\n .join(\n enter => enter.append(\"text\")\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d),\n update => update,\n exit => exit.remove()\n )\n .attr(\"x\", (d, i) => i * 17);\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"chart3.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"As before, *selection*.join returns the merged *enter* and *update* selections, so we can share code that applies to both, such as setting the *x* attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"之前，*selection*.join 返回了 *enter* 和 *update* 合并的选择，所以我们可以共享适用于两者的代码，比如设置 *x* 属性。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":751,"value":"The key function passed to *selection*.data is used to compute a (string) key for each new datum and each selected element’s old datum, determining which datum is bound to which element: if an element and datum have the same key, that datum is bound to the element and the element is put in the *update* selection. Letters make good keys, so the identity function (d => d) is appropriate here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"传递给 *selection*.data 的键函数用于计算每个新基准和每个选定元素的旧基准的（字符串）键，确定哪个基准绑定到哪个元素：如果一个元素和基准有相同的键，这个基准会绑定到这个元素，并且这个元素会放入 *update* 选择。字母是很好的键，所以身份函数（d => d）在这里是合适的。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":837,"value":"(If no key function is specified, data is bound by index: the first datum is bound to the first element, and so on. As an exercise, try rewriting the code above to join by index. You’ll also want to swap setting the *x* attribute with setting the text content!)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"（如果没有指定键函数，数据通过索引绑定：第一个基准绑定第一个元素，依次类推。作为练习，尝试用索引重写上面的代码。你还需要将设置 *x* 属性与设置文本内容交换。）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":363,"value":"Where selections really shine, though, are transitions! ✨\n\nBelow, letters enter from the top, slide horizontally when they update, and exit to the bottom. This is much easier to interpret than the instantaneous cuts above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"然而，选择真正闪耀的地方是过渡！✨\n\n下面，字母从上面进入，更新时水平滑动，从下方退出。这比上面的瞬时切割更容易解释。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"chart4 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .style(\"display\", \"block\");\n\n let text = svg.selectAll(\"text\");\n\n return Object.assign(svg.node(), {\n update(letters) {\n const t = svg.transition().duration(750);\n\n text = text\n .data(letters, d => d)\n .join(\n enter => enter.append(\"text\")\n .attr(\"y\", -7)\n .attr(\"dy\", \"0.35em\")\n .attr(\"x\", (d, i) => i * 17)\n .text(d => d),\n update => update,\n exit => exit\n .call(text => text.transition(t).remove()\n .attr(\"y\", 41))\n )\n .call(text => text.transition(t)\n .attr(\"y\", 17)\n .attr(\"x\", (d, i) => i * 17));\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"chart4.update(randomLetters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Good transitions don’t just make a graphic “dance” to grab attention; they help the viewer understand through motion *how the data changes*. \n\nGood transitions maintain [*object constancy*](https://bost.ocks.org/mike/constancy/): a graphical element that represents a particular thing (such as the letter C) *before* the transition should represent the same thing *throughout and after* the transition, allowing continuous tracking by the viewer. If instead the meaning of a given element were to change during the transition, then the motion would be meaningless.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"好的过渡不止是用来吸引注意，他们可以通过运动帮助观看者理解*数据是如何变化的*。\n\n良好的过渡可以保持[*对象恒定性 object constancy*]()：一个图形元素在过渡开始之前表示一个特定事物（比如字母C），在整个过渡期间和之后应表示相同的事物，从而允许观看者持续跟踪。相反，如果给定元素的含义在过渡期间发生变化，那么运动将毫无意义。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":921,"value":"How about a more practical example?\n\nThe chart below shows the top ten states (and D.C., the urban outlier) by percentage of population in a particular age group. It shows Utah’s disproportionately youthful population, a reflection of the LDS Church’s emphasis on raising families. Florida in contrast has a large retiree population, many in their seventies or older.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1174,"value":"举一个更实际的例子如何？\n\n下图显示了按特定年龄组人口百分比计算的前十个州（以及华盛顿特区，城市异常值）。它显示了犹他州不成比例的年轻人口，反映了LDS教会对养育家庭的重视。相比之下，佛罗里达州有大量的退休人员，其中许多人已经七十多岁或更老了。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":958,"value":"As you change the selected age group, watch how the bars reorder to reflect the change in ranking. The *x*-axis simultaneously rescales to fit the new data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof agedata = Inputs.select(new Map(data.ages.map(age => [age, data.filter(d => d.age === age).sort((a, b) => d3.descending(a.value, b.value))])), {label: \"Age group\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"chart.update(agedata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"Only the top 10 bars are visible because the remaining bars are hidden below the chart. Hence *selection*.join is not needed: no bars enter or exit; they only update. This not only simplifies the code, but makes the transitions more meaningful, as the speed of entering or exiting bars now hints at their offscreen position.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"只有前十的条形图可见，因为剩下的条形隐藏于图表之下。所以 *selection*.join 是不需要的：没有条形进入或退出；他们只更新。这不仅简化了代码，也让过渡更有意义，因为进入和退出的条形的速度暗示了他们在屏幕外的位置。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"Animated transitions are often triggered by the reader poking or prodding in search of answers. Next let’s see how we can make charts respond to such queries.\n\nNext","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1182,"value":"动画过渡通常是由读者戳或刺激寻找答案而触发的。接下来，让我们看看如何使图表响应此类查询。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"data = {\n const data = await FileAttachment(\"us-population-state-age.csv\").csv();\n const ages = data.columns.slice(1);\n const totals = new Map(data.map(d => [d.name, d3.sum(ages, age => d[age])]));\n return Object.assign(d3.cross(data, ages).map(([d, age]) => ({name: d.name, age, value: +d[age] / totals.get(d.name)})), {names: data.map(d => d.name), ages});\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"xAxis = (g, x) => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).ticks(width / 80, \"%\"))\n .call(g => (g.selection ? g.selection() : 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":166,"value":"yAxis = (g, y) => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"height = margin.top + 20 * 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"margin = ({top: 30, right: 20, bottom: 0, left: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"