Learn D3.js

Creating elements

Now let's create a draw() function to display the first word. The array of letters that is used as a dataset can be created with dataset[idx].split(""). Each letter will be contained in a <div> element. The following code achieves this:

function draw() {    d3.select("#container")      .selectAll(".letter")      .data(datasets[idx].split('')).enter()      .append("div")        .attr("class", "letter")        .style("background-color", d => colors[idx]).text(d => d);}

Call the draw() function after running the code that displays the buttons. See GUP/3-create.html. The resulting generated HTML is shown here. The <div> element uses the display: inline-block CSS style so that it displays as shown, without line breaks:

<div id="container"> <div class="letter" ...