![\"\"](\"https:\/\/i0.wp.com\/chewett.co.uk\/blog\/wp-content\/uploads\/2018\/08\/d3_data_binding.jpg?resize=678%2C254\")
<\/p>\n<\/p>\n
This post goes through the process of binding data to elements and creating a simple updatable SVG graphic using D3.js version 5.<\/p>\n
<\/p>\n
In D3.js version 4 there was quite a big update to how data is bound to elements and updated. This means there is a lot of code which currently will subtly fail to update visualisations created.<\/p>\n
Today I am using the current latest version of D3.js (version 5) to show a simple example binding and updating data. This will demonstrate the new system of having an updatable visualisation based on the data.<\/p>\n
The body of the page will only contain a SVG to draw onto and two buttons. These buttons will let the user increment the number of times that the button has been pressed. Below is the code to add these three elements to the page.<\/p>\n
<p>\r\n <button onclick="buttonPress(1)">Button 1<\/button>\r\n <button onclick="buttonPress(2)">Button 2<\/button>\r\n<\/p>\r\n<p>\r\n <svg id="mainSvg" height="100" width="300"><\/svg>\r\n<\/p><\/pre>\nThe onclick\u00a0functions on the buttons will be explained in the next step. These functions are called whenever the button is pressed.<\/p>\n
I have given the SVG an ID so that it may be referred to, and a width and height appropriate to the content we are going to add. In more advanced graphs you may resize the SVG depending on the content.<\/p>\n
Creating the data structure and update buttons<\/h2>\n
To illustrate data binding I am going to create a simple data structure to hold information about the number of times a button has been pressed. Below is the data structure that will hold this data.<\/p>\n
var data = [\r\n {"title": "Button One", "timesPressed": 0},\r\n {"title": "Button Two", "timesPressed": 0}\r\n];<\/pre>\nEach time the button is pressed I will add one to the count.\u00a0 The following function will be triggered when the buttons are pressed to increment the count.<\/p>\n
function buttonPress(buttonNumber) {\r\n data[buttonNumber - 1].timesPressed++;\r\n update();\r\n}<\/pre>\nThe variable
buttonNumber<\/code>\u00a0has one taken off it since arrays are 0 indexed. Once thetimesPressed<\/code> key is incremented theupdate()<\/code> function is called. This will be our primary function to create and update the visualisation.<\/p>\nSelecting the SVG<\/h2>\n
First we need to select the SVG we are going to be drawing, this can be done by the following code.<\/p>\n
var s = d3.select("#mainSvg");<\/pre>\nThis saves the SVG reference to the
s<\/code> variable to access it.<\/p>\nEntering, Updating and Exiting<\/h2>\n
When creating and updating the SVG there are three major ways to operate on a selection.<\/p>\n
\n
- Update – Is used for all elements which already have data bound to it<\/li>\n
- Enter – Is used for when the data you are binding has no element already bound to it<\/li>\n
- Exit – Is used when there was previously data bound but there is no longer<\/li>\n<\/ul>\n
D3 splits up divides all operations on elements to these three groups and allow you to customize how each is dealt with.<\/p>\n
Here I will show and explain what I will be doing in each part and then show the full context of the update function.<\/p>\n
Update – Selecting all elements that are currently bound to data<\/h3>\n
The first part of generating SVG’s from data is selecting the elements currently on the page bound to data. Each element generated by D3 is bound to a specific piece of data.<\/p>\n
var titleTextSelection = s.selectAll(".buttonTitles").data(data);<\/pre>\nHere I select every element under the main SVG\u00a0element with the class
buttonTitles<\/code>. Usingdata()<\/code>\u00a0I pass in my current data set which selects elements currently bound to data.<\/p>\nAny operations on this selection will be performed on these elements already on the page, whose data elements are still in the values passed to the
data()<\/code> call.<\/p>\nThis selection is saved into a variable as this selection also allows us to operate on elements that need to be created (added into the data set), and those that have been removed from it.<\/p>\n
At the moment I am not going to do anything currently to the elements existing on the page so I don’t use this selection currently.<\/p>\n
Exit – Handling elements no longer bound to data<\/h3>\n
The next step is to handle elements that are no longer bound to the data. These would have been elements created by the
enter()<\/code> call previously but their data no longer exists in the value passed intodata()<\/code>.<\/p>\ntitleTextSelection.exit().remove();<\/pre>\nAbove I use the selection created before and call the .exit() method on it. Anything chained after the .exit() method will operate on the elements that no longer part of the data. Since I no longer want these elements to appear on the SVG I call
remove()<\/code>\u00a0to remove them from the SVG.<\/p>\nEnter – Creating new elements from data currently not bound<\/h3>\n
On the first call to our update function, the first two function calls will do nothing as there is no elements currently bound to data. This means there is nothing to select and nothing to remove. However
.enter()<\/code> will create the appropriate elements the first time around.<\/p>\nvar titleTextEnter = titleTextSelection\r\n .enter()\r\n .append("text")\r\n .attr("class", "buttonTitles")\r\n .attr("y", function(d, index) { return 20 + (index * 50); })\r\n;<\/pre>\nHere the selection is used again and this time
enter()<\/code> is called on it to operate on all data elements that are new. I first append a text element usingappend(\"text\")<\/code> and set its class and position on the page.<\/p>\nEach chained function can either take a specific value or a function. The first parameter to this function is the data representing the element and the second is the index. Above I am using the index to offset each piece of text in the y dimension.<\/p>\n
It is important to note that these function calls will only be made when elements are added to the page. If you want data to be updated you will want to add them to the update function calls.<\/p>\n
I save this to a variable which holds all the elements that have been created by the
enter()<\/code> function.<\/p>\nEnter and Update – Combining operations that need to run on both new and old elements<\/h3>\n
The final step in my update function is to set the value of the text element. This could be done by writing the same function in both the update and enter selections however there is an easier way in D3 version 5. We are able to use the
merge()<\/code> function to merge two selections and operate on both of them.<\/p>\ntitleTextSelection.merge(titleTextEnter)\r\n .text(function(d) {\r\n return d.title + " has been pressed " + d.timesPressed + " times";\r\n });<\/pre>\nHere I use the selection of all elements on the page and merge in the selection of all created elements. This lets me apply any functions to both new and old elements reducing code duplication.<\/p>\n
In this case I set the text of the element to be the title and the number of times the button has been pressed.<\/p>\n
Combining the update parts together<\/h2>\n
Now I can combine the above code to present my single update function.<\/p>\n
function update() {\r\n var titleTextSelection = s.selectAll(".buttonTitles")\r\n .data(data);\r\n\r\n titleTextSelection.exit().remove();\r\n\r\n var titleTextEnter = titleTextSelection\r\n .enter()\r\n .append("text")\r\n .attr("class", "buttonTitles")\r\n .attr("y", function(d, index) { return 20 + (index * 50); })\r\n ;\r\n\r\n titleTextSelection.merge(titleTextEnter)\r\n .text(function(d) {\r\n return d.title + " has been pressed " + d.timesPressed + " times";\r\n });\r\n}<\/pre>\nThe full code above has the four major parts identified above:<\/p>\n