2c:null 2d:["$","title",null,{"children":"D3.js Idempotent update() Best Practice? | Andreas Åkre Solberg | Observable"}] 32:T562,chart3 = { let svg = getSvg(); svg.update = function (shift) { let g = svg .selectAll("g") .data(data) .join( (enter) => { let g = enter.append("g"); g.append("circle") .attr("cx", (d) => d * 40 + 100 + shift) .attr("cy", 50) .attr("fill", "steelBlue") .attr("opacity", 0.5) .attr("r", 30); g.append("text") .attr("x", (d) => d * 40 + 100 + shift) .attr("y", 50) .style("text-anchor", "middle") // centers horizontally .style("dominant-baseline", "middle") // centers vertically .attr("fill", "black") .text((d) => d); }, (update) => { update .select("circle") .attr("cx", (d) => d * 40 + 100 + shift) .attr("cy", 50) .attr("fill", "steelBlue") .attr("opacity", 0.5) .attr("r", 30); update .select("text") .attr("x", (d) => d * 40 + 100 + shift) .attr("y", 50) .style("text-anchor", "middle") // centers horizontally .style("dominant-baseline", "middle") // centers vertically .attr("fill", "black") .text((d) => d); }, (exit) => exit.remove() ); }; return svg; }33:[] 30:{"id":"3eb6a4a8dd882534","slug":"d3-js-idempotent-update-best-practice","title":"D3.js Idempotent update() Best Practice?","thumbnail":"2277c983b90cb19a912d755cd79d5a4f1102cccb2f1eac07b90ca2c3f66b0c2e","access_level":"public","create_time":"$D2023-12-10T17:18:19.006Z","update_time":"$D2023-12-17T15:22:59.047Z","view_time":null,"first_public_time":"$D2023-12-10T18:17:47.167Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8688dc68a9c8677e","login":"andreassolberg","name":"Andreas Åkre Solberg","avatar_url":"https://avatars-next.observableusercontent.com/acbc42ba19fd6cc31f9fb2c480ad61ce1eee74773d54242186d39ff749c7710b","tier":"starter_2024"},"version":134,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c289811a0323514f","login":"andreassolberg","name":"Andreas Åkre Solberg","avatar_url":"https://avatars-next.observableusercontent.com/acbc42ba19fd6cc31f9fb2c480ad61ce1eee74773d54242186d39ff749c7710b","tier":null}],"members":[{"type":"individual","id":"c289811a0323514f","login":"andreassolberg","name":"Andreas Åkre Solberg","avatar_url":"https://avatars-next.observableusercontent.com/acbc42ba19fd6cc31f9fb2c480ad61ce1eee74773d54242186d39ff749c7710b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3.js Idempotent update() Best Practice?","cells":[{"id":0,"value":"# D3.js Idempotent update() Best Practice?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"When you would like to assign multiple svg elements with the same data structure, you need to be careful to make the update() idempotent, meaning that you will not add more elements each time. Instead, reuse and adjust elements that have been added before.\n\n### V1: One by one\n\nAs long as you add them one by one, you are fine:\n\n\n```\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"chart1 = {\n let svg = getSvg();\n svg.update = function (shift) {\n svg\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", (d) => d * 40 + 100 + shift)\n .attr(\"cy\", 50)\n .attr(\"fill\", \"steelBlue\")\n .attr(\"opacity\", 0.5)\n .attr(\"r\", 30);\n\n svg\n .selectAll(\"text\")\n .data(data)\n .join(\"text\")\n .attr(\"x\", (d) => d * 40 + 100 + shift)\n .attr(\"y\", 50)\n .style(\"text-anchor\", \"middle\") // centers horizontally\n .style(\"dominant-baseline\", \"middle\") // centers vertically\n .attr(\"fill\", \"black\")\n .text((d) => d);\n };\n\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"{\n let x = chart1;\n x.update(50);\n x.update(150);\n return x.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"### V2: First attempt on adding a group element\n\nBut there are many reasons why you would like to add these elements to a group element. \n\n```\n\n```\n\nAnd the first intuitive approach is like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"chart2 = {\n let svg = getSvg();\n svg.update = function (shift) {\n let g = svg.selectAll(\"g\").data(data).join(\"g\");\n\n g.append(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", (d) => d * 40 + 100 + shift)\n .attr(\"cy\", 50)\n .attr(\"fill\", \"steelBlue\")\n .attr(\"opacity\", 0.5)\n .attr(\"r\", 30);\n\n g.append(\"text\")\n .data(data)\n .join(\"text\")\n .attr(\"x\", (d) => d * 40 + 100 + shift)\n .attr(\"y\", 50)\n .style(\"text-anchor\", \"middle\") // centers horizontally\n .style(\"dominant-baseline\", \"middle\") // centers vertically\n .attr(\"fill\", \"black\")\n .text((d) => d);\n };\n\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"A complete failure...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"{\n let x = chart2;\n x.update(50);\n x.update(150);\n return x.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"### V3: A more advanced join","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"{\n let x = chart3;\n x.update(50);\n x.update(150);\n return x.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"## V4: Create reusable code for enter and update\n\nWorks, and no code duplication. But to me it seems a inconvenient way to achieve something that should be simple and straight forward. I assume there has to be a better way.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":109,"value":"chart4 = {\n let svg = getSvg();\n svg.update = function (shift) {\n const updateElements = (selection) => {\n selection\n .selectAll(\"circle\")\n .attr(\"cx\", (d) => d * 40 + 100 + shift)\n .attr(\"cy\", 50)\n .attr(\"fill\", \"steelBlue\")\n .attr(\"opacity\", 0.5)\n .attr(\"r\", 30);\n\n selection\n .selectAll(\"text\")\n .attr(\"x\", (d) => d * 40 + 100 + shift)\n .attr(\"y\", 50)\n .style(\"text-anchor\", \"middle\")\n .style(\"dominant-baseline\", \"middle\")\n .attr(\"fill\", \"black\")\n .text((d) => d);\n };\n\n let g = svg\n .selectAll(\"g\")\n .data(data)\n .join(\n (enter) => {\n let gEnter = enter.append(\"g\");\n gEnter.append(\"circle\");\n gEnter.append(\"text\");\n updateElements(gEnter);\n },\n (update) => updateElements(update),\n (exit) => exit.remove()\n );\n };\n\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"{\n let x = chart4;\n x.update(50);\n x.update(150);\n return x.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Utilities and data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"getSvg = () => {\n let svg = d3\n .create(\"svg\")\n .attr(\"width\", 500)\n .attr(\"height\", 100)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"12px\");\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data = d3.range(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"