D3 has the ability to manipulate webpages. Before we can manipulate a page we have to select a section of it. D3 provides the d3.select function for this purpose. d3.select takes a string argument that is a CSS selector (we covered CSS selectors in SVG CSS). Below are some examples of using d3.select.
// Select the first body element (if there are multiple, it returns the first) var bodyElem = d3.select("body"); // Select the first element with id="carlos" var carlosElem = d3.select("#carlos"); // Select the first element with class="rendon" var rendonClass = d3.select(".rendon");
Selecting ALL THE THINGS
Often we will want to select all elements that match a CSS selector. In this case we use d3.selectAll which returns all elements that match selector instead of the first match like d3.select.
D3 has many methods that operate on a "selection" which is what is returned by both d3.select and d3.selectAll. To get started, let's explore two simple but useful methods you can call on a selection.
- append([name]) - this will create a new element as the last child of the selection and it returns a selection that is the newly appended item.
- text([text]) - sets the text of the element.
All together, we can now add a headline to the bottom of our document. This is the "Hello World" of D3.
var bodySelection = d3.select("body"); var appendedH1 = bodySelection.append("h1"); appendedH1.text("Hi there");
In this example, I select the body and add a new "h1" to the bottom of it. I then set the text of the "h1" to "Hi there".
You may have noticed that I talked about the select function without saying what it or the selectAll function actually return. All you know is that you can call append on them to add a new element to the document. The select and selectAll functions return D3 objects called selections. Before we define a selection, we need to talk about the document object model (DOM).
var bodyElem = d3.select("body");
d3.select("body") === document.getElementsByTagName("body")
Below we can see why people choose libraries like D3 and jQuery over using DOM directly. The code below adds a new H1 element with the text "Hello".
// Using DOM var h1 = document.createElement("h1"); h1.innerText = "Hello"; document.getElementsByTagName("body").appendChild(h1); // Using D3 var body = d3.select("body") var h1 = body.append("h1") h1.text("Hello"); // Using D3 with method chaining (covered in next lab) d3.select("body") .append("h1") .text("Hello");
Match the description of the selection to the selection "#barChart" - elements with the id barChart ".barChart" - elements with the class barChart "barChart" - elements with the tag barChart With D3.js you need a selection to manipulate anything. True/False Calling append on a selection adds a new element as the last child of the selection. True/False
Things to do
- Use d3.select() and text() to change the first list item's text "Topic 1" to the text "d3.select()". Note that list item one has the id "topic1".
- Use d3.selectAll() to select all elements of the class "selection". Use append() to add a new "p" element with the text "(about selection)".
- Use d3.select(), append() and text() to add a new list item with the text "d3.append()".