Learn D3.js

Updating selections

We can now proceed to the next step, which is to update the colors and contents of the letterboxes when a corresponding button is clicked. At each click, the idx variable is changed and the redraw() function is called. We just need to implement this function.

The code in redraw() is similar to the code in draw(), but if it doesn't add new elements, it won't call enter() or append(). All it needs to do is call data() to update the selection with the new data and set contents and style, as follows:

function redraw() {     d3.select("#container")       .selectAll(".letter")           // selects elements to be updated       .data(datasets[idx].split(""))  // replaces with new data       .style("background-color", d => colors[idx])  // sets color .text(d => ...