3f:null 40:["$","title",null,{"children":"7_Learn D3: Joins | onepisya | Observable"}] 46: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))); } }); }47:[{"id":"81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","href":"https://static.observableusercontent.com/files/81d7bd5e9551f005d7a4764e2dcb46c44f04b5918551ce19dba191a8799b498beddb5ef2da994047586fc7231749e8911c825b1967f22814a57bee58c590c86e","name":"us-population-state-age.csv","type":"text/csv","lastModified":1660580196697.685,"size":3516}] 44:{"id":"995b91e1a1a2d767","slug":"7_learn-d3-joins","title":"7_Learn D3: Joins","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-08-15T16:16:36.697Z","update_time":"$D2022-08-17T07:57:19.426Z","view_time":null,"first_public_time":"$D2022-08-15T16:17:45.892Z","has_unpublished_edits":null,"fork":{"id":"4fed9b9938ac2369","slug":"learn-d3-joins","title":"Learn D3: Joins","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":1149,"publish_version":1149,"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":"7_Learn D3: Joins","cells":[{"id":240,"value":"# 7_Learn D3: Joins\n\n如果你在本教程中熟悉D3，你可能会惊讶于D3的选择 (selections) 是如此之少。\n\n那是因为您可能不需要它们！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"D3选择填充特定的利基(niche): 动态图形(dynamic graphics)的快速，增量更新。如果您的重点是静态图形或可以从头重新绘制的图形，则可能更喜欢其他抽象。\n\n> 另一方面，如果你想要动画转换(animated transitions)，或者想要在现代浏览器中获得最好的性能，`selections`非常适合你。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"{即使您决定不使用 `selections`，也要记住D3还有许多其他有用的可视化工具\n\nScales, shapes, interpolators, colors, map projections, 以及很多其他特性。\n\n可以与Canvas，WebGL或其他DOM抽象一起使用，例如 Observable's 的HTML标记模板字面量(htl)，React 或 Svelte。\n\nD3可以通过使用 **统计，分组和聚合，时间序列和解析(使用 `statistics(统计)`, `grouping(分组)`` `aggregation(聚合)` `time series时间序列` `parsing(解析)`) 的方法** 来**协助数据清洗(cleaning和分析)。}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"从头开始，D3选择指定 *transformation转换* 而不是 *representation表示*。\n\n您指定将当前状态转换为所需状态所需的 changes (insertions, updates, and deletions)，而不是表示所需的图形(DOM)状态\n\n有时这很乏味，但可以使您动画过渡并最大程度地减少对DOM的变化，从而提高性能。\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":435,"value":"假设我们想要显示字母表中的字母。没有太多的可视化，但我们将保持简单，以专注于技术。(关于真实的例子，请参阅 [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":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":"这个图形是静态的，因为它是在每次单元格运行时从头创建的，这使得D3代码在精神上等同于HTML文字。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"那么为什么要使用选择(selections)呢？好吧，对于静态图形，几乎没有理由。\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":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":"让我们分解代码。\n\n文本**text** 是文本元素的选择(selection)，最初是空的，其父是SVG元素。该父母确定以后将在何处附加输入文本元素。\n\n通过调用 `Selection.data` ，文本绑定到新的数据(new array) 和字母 **letters** 。\n\n- 这将计算文本选择(**text selection**)的三个不相交子集: `enter seletion` 表示没有现有元素的新数据\n- 表示有新数据的现有元素的更新选择(**update selection**)\n- 以及表示没有新数据的现有元素的退出选择(**exit selection**)。\n\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":528,"value":"

\n \n

三个 selections computed 通过 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":"(这些选择隐藏在代码中: **selection.data** 返回 **update** 选择，您可以从中调用 **selection.enter** 或 **selection.exit** 来访问其他选择。)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"我们可以手动处理这三种情况，但是 [*selection*.join](/@d3/selection-join) 提供了方便的默认值。\nenter selection is appended; exit selection is removed; 最后， **update** 和 **enter** selctions is merged(合并), ordered(排序) 和 returned(返回)。\n\n然后，我们可以为这些 entering 或 updating 元素分配属性(attributes和 text)。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"> 只要字母和文本元素之间的 **关联保持不变**，就不需要在更新元素 **updating elements** 上重新分配某些属性和文本内容，这样可以提高效率。\n\n为了保持这种联系，`*selection*.data` 需要一个 `key` 函数;\n对于*enter*, *update*, 和*exit* 的精确操作，*selection*.join 需要相应的 `function`。\n\n> 如果 *更新update* 比 *进入enter* 和 *退出exits* 更普遍，那么这可以大大 **提高性能**！\n\n例子如下:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"chart3 = {\n const svg = d3\n .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) =>\n enter\n .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":"和之前一样， *selection*.join 返回合并后的 **enter** 和 **update** slections,\n\n因此，我们可以 **共享** 适用于两者的代码，例如设置 **x** 属性。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"传递给*selection*.data 的 `key` function 用于为每个新基准(new datum) 和每个选定元素(selected elements)的旧基准计算一个(字符串) key，确定哪个基准绑定到哪个元素：\n\n如果元素和基准具有相同的 **key** ，该基准绑定到元素，并将元素放在 **update** selection 中。 Letters make good keys，因此 **identity function** （ d => d ）在这里很合适","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"如果未指定 *key function*，数据受索引约束: 第一个基准绑定到第一个元素，等等。\n\n作为练习，请尝试重写上面的代码以通过索引 `join`。还需要将 *x* **属性的设置** 与 **文本内容的设置** 交换!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"## 练习题请写在这里。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1140,"value":"// put your code in here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"但是，选择真正发光的地方是过渡(transition)！✨\n\n在下面，字母从顶部输入(enter)，在更新(update)时水平滑动，然后从底部退出(exit)。这比上面的瞬时切割要容易得多。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"良好的过渡不仅会使图形“舞蹈”引起注意。他们通过运动来帮助观众了解数据如何变化。\n\n良好的过渡保持 [对象恒定 *object constancy*](https://bost.ocks.org/mike/constancy/)：\n\n在转换前表示特定事物的图形元素(比如字母C)应该在整个转换过程中和转换后表示相同的事物，这样可以让观看者持续跟踪。\n\n如果给定元素的意义在转换过程中发生变化，那么这个运动就没有意义了。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"一个更实用的例子怎么样？\n下图显示了前十个州(华盛顿特区则是城市中的异类) by 特定年龄段的人口百分比. \n它显示犹他州的年轻人口不成比例, LDS教会强调抚养家庭的反映. 相比之下，佛罗里达州的退休人员人口众多，他们有很多七十多岁或以上的人。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"当您更改所选的年龄组时，请观察条形图如何重新排序以反映排名的变化。*x*-轴同时缩放以适应新数据。","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":"$46","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":"只有前10条柱形(bar) 是可见的，因为其余的柱形隐藏在图表下面。因此 *selection*.join 不需要:没有 *bar* **enter** 或 **exit** ;他们只 **update**。这不仅简化了代码，而且使转换(**transitions**)更有意义，因为进入enter 或退出exit bar 的速度现在暗示它们在屏幕外的位置。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"动画转换通常是由读者在寻找答案时 poking 或 prodding 而触发的。接下来，让我们看看如何使图表响应这样的查询。\n\nNext\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"$W47","stdlib":"1"}} 45:"$44:body"