3f:null 40:["$","title",null,{"children":"D3 data binding v3 to v5 | Homam Hosseini | Observable"}] 46:[] 44:{"id":"b183a30b2cd7444d","slug":"d3-data-binding-v3-to-v5","title":"D3 data binding v3 to v5","thumbnail":"c4e3a580ccea6b2b5714912f9df52d2c252def8a866707432d353e4a988de8e2","access_level":"public","create_time":"$D2019-07-09T20:25:10.297Z","update_time":"$D2019-07-09T20:25:10.297Z","view_time":null,"first_public_time":"$D2019-07-09T20:25:17.135Z","has_unpublished_edits":null,"fork":{"id":"cfa62d7e9b8c078e","slug":"d3-data-binding-v3-to-v5","title":"D3 data binding v3 to v5","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":0,"starred":false,"owner":{"type":"team","id":"94cdb8fcfaa70289","login":"homam","name":"Homam Hosseini","avatar_url":"https://avatars-next.observableusercontent.com/e0def13806509253b7525280313ec25e10226ac9e6db096f202ba32c26977e45","tier":"starter_2024","bio":"","following":false},"version":294,"publish_version":294,"role":null,"authored":false,"authors":[{"type":"individual","id":"2dc4aa8d6c8e9871","login":"homam","name":"Homam Hosseini","avatar_url":"https://avatars-next.observableusercontent.com/e0def13806509253b7525280313ec25e10226ac9e6db096f202ba32c26977e45","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"2dc4aa8d6c8e9871","login":"homam","name":"Homam Hosseini","avatar_url":"https://avatars-next.observableusercontent.com/e0def13806509253b7525280313ec25e10226ac9e6db096f202ba32c26977e45","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 data binding v3 to v5","cells":[{"id":0,"value":"md`# D3 data binding v3 to v5\n\nThis tutorial explains how data binding changed in d3 from v3 (d3@3) to v4 (d3@4) and to v5 (d3@5). You should understand what data binding is for reading this, so check [my intro to d3](https://observablehq.com/@john-guerra/intro-to-d3) or [Mike's original article about thinking in joins](https://bost.ocks.org/mike/join/) before continuing.\n\n**In d3@3 selection order mattered**\n\nLet's say you want to manipulate an svg that already contains two circles. You select them all it with d3, bind the data, and then set the properties of the newly created circles to start small. You then used a transition to animate all the circles to the same size (re run the following cell to see the animation). The black circles are the ones that we are updating, and the blue ones the ones we needed to add\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"{\n const d3 = await require(\"d3@3\");\n \n // An svg with two circles\n const svgEle = html``;\n \n let data = [1,2,3,4,5,6,7];\n \n // You bind it to some data\n const nodesUpdate = d3.select(svgEle)\n .selectAll(\"circle\")\n .data(data);\n \n // Add five more circles to match the data\n const nodesEnter = nodesUpdate.enter()\n .append(\"circle\")\n .style(\"fill\", \"steelblue\")\n .attr(\"cy\", 20)\n .attr(\"r\", 1)\n .attr(\"cx\", d=> d*20);\n \n nodesUpdate\n .transition().duration(1000)\n .attr(\"r\", 5); // Sets r=5 for update + enter\n \n return svgEle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"md `However if you call the transition before creating the nodes, it won't work. Which makes sense if you think in a sequential way...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"{\n const d3 = await require(\"d3@3\");\n \n const svgEle = html``;\n \n let data = [1,2,3,4,5,6,7];\n \n const nodesUpdate = d3.select(svgEle)\n .selectAll(\"circle\")\n .data(data);\n \n nodesUpdate\n .transition().duration(1000)\n .attr(\"r\", 5); // Sets r=5 only for update\n \n const nodesEnter = nodesUpdate.enter()\n .append(\"circle\")\n .style(\"fill\", \"steelblue\")\n .attr(\"cy\", 20)\n .attr(\"r\", 1)\n .attr(\"cx\", d=> d*20);\n \n return svgEle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"md`In d3@4 (d3@5) \\`.selectAll().data()\\` gets you the update set, regardless of the order you call it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"{\n const d3 = await require(\"d3@4\"); // We use v4 now\n \n const svgEle = html``;\n \n let data = [1,2,3,4,5,6,7];\n \n const nodesUpdate = d3.select(svgEle)\n .selectAll(\"circle\")\n .data(data);\n \n const nodesEnter = nodesUpdate.enter()\n .append(\"circle\")\n .style(\"fill\", \"steelblue\")\n .attr(\"cy\", 20)\n .attr(\"r\", 1)\n .attr(\"cx\", d=> d*20);\n \n nodesUpdate\n .transition().duration(1000)\n .attr(\"r\", 5); // Sets r=5 only for update\n \n return svgEle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md `If you want update + enter in v4 (or v5), you can use \\`selection.merge()\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"{\n const d3 = await require(\"d3@4\"); \n const svgEle = html``;\n \n let data = [1,2,3,4,5,6,7];\n \n const nodesUpdate = d3.select(svgEle)\n .selectAll(\"circle\")\n .data(data);\n \n const nodesEnter = nodesUpdate.enter()\n .append(\"circle\")\n .style(\"fill\", \"steelblue\")\n .attr(\"cy\", 20)\n .attr(\"r\", 1)\n .attr(\"cx\", d=> d*20);\n \n nodesUpdate\n .merge(nodesEnter) // We need to manually merge update + enter\n .transition().duration(1000)\n .attr(\"r\", 5);\n \n return svgEle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`Merge will work regards of when you call it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"{\n const d3 = await require(\"d3@4\");\n \n const svgEle = html``;\n \n let data = [1,2,3,4,5,6,7];\n\n const nodesUpdate = d3.select(svgEle)\n .selectAll(\"circle\")\n .data(data);\n \n const nodesEnter = nodesUpdate.enter()\n .append(\"circle\");\n \n // Will still update r=5 for enter+update regardless of it being called before setting r=1 in enter\n nodesUpdate\n .merge(nodesEnter) \n .transition().duration(1000)\n .attr(\"r\", 5); \n\n nodesEnter\n .style(\"fill\", \"steelblue\")\n .attr(\"cy\", 20)\n .attr(\"r\", 1)\n .attr(\"cx\", d=> d*20);\n \n return svgEle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md`For d3@5 Mike et. al. [introduced \\`.join()\\`](https://observablehq.com/@d3/selection-join), which greatly simplified the general update pattern, look how much clearner the code looks now`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"{\n const d3 = await require(\"d3@5\"); // We use v5 now\n \n // An svg with two circles\n const svgEle = html``;\n \n let data = [1,2,3,4,5,6,7];\n \n const nodes = d3.select(svgEle)\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .style(\"fill\", \"steelblue\")\n .attr(\"cx\", d => d*20)\n .attr(\"cy\", 20)\n .attr(\"r\", 1) \n .transition().duration(1000)\n .attr(\"r\", 5); \n \n return svgEle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`And if you still want individual control over enter, update, and exit you can also do have it by passing functions to the join method, as [explained by Mike here](https://observablehq.com/@d3/selection-join)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"data = {\n for await (const i of asyncIterableRange(600, 1000)) {\n yield [...Array((i % 5) ).keys()].map(x => x + 1);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"svgEle = {\n const d3 = await require(\"d3@5\"); // We use v5 now\n \n // An svg with two circles\n const svgEle = html``;\n return svgEle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"{\n const d3 = await require(\"d3@5\"); \n \n // let data = [1,2,3,4,5,6,7];\n \n const nodes = d3.select(svgEle)\n .selectAll(\"circle\")\n .data(data)\n .join(\n enter => enter.append(\"circle\") \n .style(\"fill\", \"steelblue\")\n .attr(\"r\", 0)\n , x => x\n ,\n exit => exit.each(function (d, ...rest) {\n console.log('d', d, d3.select(this).datum(), d3.select(this).attr(\"data-index\"))\n d3.select(this).transition().duration(d * 50).style(\"fill\", \"red\").attr(\"r\",0).transition(2000).remove()\n })\n // exit => exit.call(exit => exit.transition().duration((d, ...rest) => {\n // console.log('d', d, ...rest)\n // return d * 900\n // }).style(\"fill\", \"red\").attr(\"r\",0).remove())\n ) // after the join you can think of the selection as update + enter\n .attr(\"cx\", d => (d + 1) *20)\n .attr(\"cy\", 20)\n .attr(\"data-index\", d => d)\n .call(update => update.transition().duration(850) \n .attr(\"r\", 5));\n \n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"function asyncIterableRange(n, delay) {\n return {\n [Symbol.asyncIterator]: () => {\n let i = 0\n return {\n next: async () => {\n await Promises.delay(delay);\n return i > n \n ? {done: true} \n : {done: false, value: i++};\n }\n };\n }\n };\n}","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"