31:[] 2f:{"title":"Understanding D3 enter(), exit(), merge() & key function","cells":[{"id":0,"value":"md`# Understanding D3 enter(), exit(), merge() & key function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"html`\nThis will ilustrate how D3 data-join pattern works.\nWith the use of enter(), exit() and merge(). Also, the utility of the key function used with the data() function\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"html`\n

\nFunctions `enter()`, \n`exit()`\n`merge()`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"html`\n

enter() function creates the initial join of the data with our DOM elements. Thus selecting only the elements that were not in the DOM yet
merge() function will select the DOM elements that did not exist in the DOM before and the ones that did
exit() function will select the DOM elements that are left from the join.

\nIn the examples below, we are gointg to see how each of these functions work\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"value":"html`\nWe are going to define our data as an array of things, for simplicity of the example we won't care about what the things are\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = [null,null,null,null,null]","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"html`\nWe are going to have an auxiliary function that creates elements in the DOM in order to state the elements that are already in the DOM when we use our functions\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"init={\n return (svg, width, height, rad, cant) => {\n for(let i = 0; i < cant; i++){\n svg\n .append('rect')\n .attr('x', i*rad*2.5)\n .attr('y', 0)\n .attr('width', rad*2)\n .attr('height', rad*2)\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"html`\nLet's remember that the pattern for joining data with D3 is:\n

\n  svg.selectAll(\"DOM_Element\")\n     .data(our_data)\n     .enter()\n     .append(\"DOM_Element\")\n     ...\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"html`\n...But there is a catch\n
\nIn the following examples we will have 3 existing DOM elements and our array of data has 5 elements, so only two elements will be appended to the DOM\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"html`\nEach square represents an element of our data.\nWe will be processing each element of our data, but only apply an orange background to the ones that are selected in each case\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"md`### Selection of appended elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"html`\nIn the following case, and the most used one, we will only be selecting and applying the style to the missing elements in the DOM\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":699,"value":"html`\n

Pattern

\n  \n    svg\n      .selectAll('rect')\n      .data(data)\n      .enter()           // Will do the join between the data and the elements\n      .append('rect')    // Will append the missing elements\n      ...                // Anything from this point will be executed only to the appended elements\n  \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"{ \n const width=7.5*(config.size*2);\n const height=config.size*2;\n const rad = config.size;\n \n const svg = d3\n .select(DOM.svg(width, height));\n \n init(svg, width, height, rad, 3);\n \n const sd = svg\n .selectAll('rect')\n .data(data)\n \n // Select the missing circles and styles them\n sd.enter()\n .append('rect')\n .style('fill','orange')\n .attr('width', rad*2)\n .attr('height', rad*2)\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"md`### Selection of existing elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"html`\nHere, ocurrs the oposite and only to the existing elements will be applied the style\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"md`#### Pattern`","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"html`\n

\n\n const selectedElements = svg\n    .selectAll('rect')\n    .data(data);\n   \n  selectedElements\n    .enter()            // We do the join between the data an the elements\n    .append('rect');    // We append the missing elements\n  \n  selectedElements      // Here we have selected only the existing rect elements\n    ...                 // Anything applied beyond here will be only applies to the existing rect elements\n\n\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"{\n const width=7.5*(config.size*2);\n const height=config.size*2;\n const rad = config.size;\n \n const svg = d3\n .select(DOM.svg(width, height));\n \n init(svg, width, height, rad, 3);\n \n const sd = svg\n .selectAll('rect')\n .data(data);\n \n // Select the missing circles\n sd.enter()\n .append('rect')\n .attr('width', rad*2)\n .attr('height', rad*2)\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0)\n \n // Style the initially selected circles\n sd\n .style('fill','orange')\n \n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"html`\n
Selection of existing and appended elements with merge()
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"html`\nWith the help of the merge() function we will solve the previous problem. This function will select both the existing elements and the appended ones.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"md`#### Pattern`","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"html`\n
\n\nconst selectedElements = svg\n .selectAll('rect')\n .data(data); // We have selected the existing elements in the DOM\n \n selectedElements\n .enter()\n .append('rect') // Here we have appended the missing elements\n .merge(selectedElements) // Here we merge the appended elements with the existing ones\n .... // Anything beyond here will be applied to the join of the appended elements \n and the existing ones (That correspond with the data)\n\n
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"{\n const width=config.size*2*7.5;\n const height=config.size*2;\n const rad = config.size;\n \n const svg = d3\n .select(DOM.svg(width, height));\n \n init(svg, width, height, rad, 3);\n \n const sd = svg\n .selectAll('rect')\n .data(data);\n \n // Select all the circles\n sd.enter()\n .append('rect')\n .merge(sd)\n .attr('width', rad*2)\n .attr('height', rad*2)\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0)\n .style('fill','orange')\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"html`\n
Selection of non-covered existing elements with exit()
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"html`\nWe have talked about appended elements and existing ones. But what if our DOM has more elements than our data?
\nWell, they are selected too 😱! That happens when we do svg.selectAll('rect'). But this allow us to perform some actions over these elements with the help of exit()\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":784,"value":"md`#### Pattern`","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"html`\n
\n\nconst selectedElements = svg\n .selectAll('rect') // We select the elements to do the join\n .data(data);\n \n selectedElements\n .enter() // Remember here we do the join\n .append('rect') // And append the missing elements\n .merge(sd) // We perform the merge to act on all of the elements of our data\n ...\n \n selectedElements\n .exit() // We exit the join and now everything we will perform will be on the excluded elements\n ...\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"{\n const width=config.size*2*15;\n const height=config.size*2;\n const rad = config.size;\n \n const svg = d3\n .select(DOM.svg(width, height));\n \n init(svg, width, height, rad, 8);\n \n const sd = svg\n .selectAll('rect')\n .data(data);\n \n // Select all the circles\n sd.enter()\n .append('rect')\n .merge(sd)\n .attr('width', rad*2)\n .attr('height', rad*2)\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0)\n .style('fill','orange')\n \n sd.exit()\n .style('fill', 'red')\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":485,"value":"html`
Removing elements with exit()
`","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"value":"html`\nSome of the utilities of exit() is to remove the surplus of elements, and it is no big deal with the help of the remove() function\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"md`#### Pattern`","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"html`\n
\n\n ...\n\n selectedElements\n .exit()\n .remove() // Removes the \"selected\" elements. In this case, the selected elements correspond to the\n exited elements\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"{\n const width=config.size*2*7.5;\n const height=config.size*2;\n const rad = config.size;\n \n const svg = d3\n .select(DOM.svg(width, height));\n \n init(svg, width, height, rad, 10);\n \n const sd = svg\n .selectAll('rect')\n .data(data);\n \n // Select all the circles\n sd.enter()\n .append('rect')\n .merge(sd)\n .attr('width', rad*2)\n .attr('height', rad*2)\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0)\n .style('fill','orange')\n \n sd.exit()\n .remove()\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"md`# Data join key function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":558,"value":"html`\nWhen the join of the data is done, many things happen. One of them is that we are binding each item in our data to one DOM element.
\nBut we may want to have a unique ID on our item. That is what the key function is for! \n
\n ...\n .data(data, (e) => ...)\n
\nThis function has an argument an it is each element of your data, after all, that is what makes them unique right?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"html`Altough you may be wondering, in which cases do I want a unique ID? 🤔... Well, in the examples below are two of them`","pinned":false,"hidden":false,"mode":"ojs"},{"id":868,"value":"md`#### Case 1`","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"html`\n\nRemember when you have elements in your DOM and you want to append some more, depending on you data, was necesary to use the merge() function in order to have all the elements in the selection? Well, what if you want to add as much elements as you have in your data or by some reason, you want to leave the existing DOM elements just the way they are?\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"html`\nWell, one use of the key function is to solve the problem stated above. Because with the key function you are joining an element with a given ID with an element, and if a DOM element still does not have that relation with you data, then a new element is created
\n\nConsider the example below, in which I take the key to be the element itself as the key.
I will be giving the boxes an offset for you to realize what is happening here\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"{ \n const width=config.size*2*7.5;\n const height=config.size*3;\n const rad = config.size;\n \n const svg = d3\n .select(DOM.svg(width, height));\n \n init(svg, width, height, rad, 3);\n \n const sd = svg\n .selectAll('rect')\n .data(data, d => d)\n \n // Select the missing circles and styles them\n sd.enter()\n .append('rect')\n .style('fill','orange')\n .attr('width', rad*2)\n .attr('height', rad*2)\n .attr('x', (_,i) => i*rad*2.5+rad/2)\n .attr('y', rad/2);\n \n sd.text('0')\n\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":912,"value":"html`\nNote in black are the existing DOM elements and in orange the ones that were appended\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"md`#### Case 2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"html`\nBeyond being another case is a better way of seeing what can be util when asigning a key function.\nFor you to understand what is going on, each box will have a number associated to it.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"html`\nI will be using new data in order to give a better example and to be interactive\nThis new dataset will be just an array of the numbers from 5 to 1 all inclusive.
\nAnd to make it interactive, I will keep in mind which will be the next number to be added\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"key_data = {\n return {\n data:[5,4,3,2,1],\n actual: 6\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"data2 = key_data.data","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"md`Data join without key function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":941,"value":"html`\nWe have an example of boxes with numbers which do not have a key function\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"nokey = {\n const width=1000;\n const height=config.size*2;\n const rad = config.size;\n \n const svg = d3\n .select(DOM.svg(width, height)); \n \n const update = () =>{\n init(svg, width, height, rad, 1);\n\n const sd = svg\n .selectAll('rect')\n .data(data2);\n\n // Select all the circles\n sd.enter()\n .append('rect')\n .merge(sd)\n .attr('width', rad*2)\n .attr('height', rad*2)\n .transition()\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0)\n .style('fill','orange');\n \n const te = svg\n .selectAll('text')\n .data(data2);\n \n te\n .enter()\n .append('text')\n .merge(te)\n .transition()\n .text(d => d)\n .attr('x', (_,i,c) => (i*rad*2.5) + rad)\n .attr('y', rad)\n .style('alignment-baseline','middle')\n .style(\"text-anchor\", \"middle\");\n\n te.exit().remove();\n sd.exit().remove();\n }\n update();\n return [svg.node(), update];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"md`Data join with key function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":945,"value":"html`\nWe have another exmple of boxes with numbers which do have a key function, and will be the item (number) itself\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"keyed = {\n const width=1000;\n const height=config.size*2;\n const rad = config.size;\n \n const alph = 'ABCDEFGH';\n \n const svg = d3\n .select(DOM.svg(width, height)); \n \n const update = () =>{\n init(svg, width, height, rad, 1);\n\n const sd = svg\n .selectAll('rect')\n .data(data2, d=>d);\n\n // Select all the circles\n sd.enter()\n .append('rect')\n .merge(sd)\n .attr('width', rad*2)\n .attr('height', rad*2)\n .transition()\n .attr('x', (_,i) => i*rad*2.5)\n .attr('y', 0)\n .style('fill','orange');\n \n const te = svg\n .selectAll('text')\n .data(data2, d=>d);\n \n te\n .enter()\n .append('text')\n .merge(te)\n .transition()\n .text(d => d)\n .attr('x', (_,i,c) => (i*rad*2.5) + rad)\n .attr('y', rad)\n .style('alignment-baseline','middle')\n .style(\"text-anchor\", \"middle\");\n\n te.exit().remove();\n sd.exit().remove();\n }\n \n update();\n return [svg.node(), update];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":966,"value":"md`### What is going on?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"html`\nWhat is happening is that D3 is doing some kind of reuse in the DOM elements\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"html`\nIn the first example (with no key function) all the elements are reasigned, thus changing the element it has previously\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":979,"value":"html`\nOn the other, in the second example (the one with key function), the elements already know which element they belong to, so they are not changed\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"html`\nPlay with the button \"Add new Item\" below, you will add a new element in the top of the data
\nYou can reset the data with the \"Reset\" button\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof insert = {\n const but = html``;\n but.onclick = ev =>{\n data2.unshift(key_data.actual++);\n nokey[1]();\n keyed[1]();\n }\n \n const reset = html``;\n reset.onclick = ev => {\n key_data.data.splice(0);\n for(let i = 5; i>0; i--){\n key_data.data.push(i)\n }\n key_data.actual=6;\n nokey[1]();\n keyed[1]();\n }\n \n return html`
${but}${reset}
`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"html`\nNo key function\n${nokey[0]}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"html`\nKey function\n${keyed[0]}\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":947,"value":"md`--- \n## Config `","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"config = {\n return {\n size: 30\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":533,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}

\nFunctions `enter()`, \n`exit()`\n`merge()`\n

Pattern

Selection of existing and appended elements with `merge()`

Selection of non-covered existing elements with `exit()`

Removing elements with `exit()`

\nFunctions enter(), \nexit()\nmerge()\n

Pattern

Selection of existing and appended elements with merge()

Selection of non-covered existing elements with exit()

Removing elements with exit()

\nFunctions `enter()`, \n`exit()`\n`merge()`\n

Selection of existing and appended elements with `merge()`

Selection of non-covered existing elements with `exit()`

Removing elements with `exit()`