Question: Storing Selections in Variables about d3-book HOT 3 CLOSED

@seanlacey Thank you! Great question.

Part of the chaining structure is that selections get "handed off" to each subsequent link in the chain. When we're talking about selections, usually (but not always) we'll start with a broader selection, then narrow down, so later parts of the chain are dealing with more specific selections.

For example, going from broad to specific in the DOM:

html > body > p

The HTML element is parent to the body element, which is parent to the p element. So you could select that p with:

d3.select("html").select("body").select("p")

This is a verbose, clunky way to write D3 code, but bear with me. This moves from general to specific. d3.select("html") selects the HTML element, then "hands off" that reference to the next link in the chain. select("body") starts with the HTML element selection, then within that searches for the first body element. (Spoiler: There's only one!) Then the selection pointing to body is handed off to the final select("p"), which looks inside of the body selection to find a p.

When you store the result of a chained sequence like this in a variable, whatever is left at the end of the chain is stored in the variable. So:

var paragraph = d3.select("html").select("body").select("p")

Here, the selections of html and body are used briefly, just to get to p, which is then stored in paragraph for later reference.

Does that help?

from d3-book.

I think so, I think I was reading the chapter 9 example as the selection would contain all p elements regardless of if they were in the body element (though there wouldn't be any) which was leading to my confusion.

Also here's a link to my first D3 project (with a lot of help from your mapping chapter). Thank you again, the book has been great! https://slacey.net/DIBNovember2019/DIBNOV2019.html

from d3-book.

Wow, you made an interactive map!! 👏 I love it! I accidentally stumbled into a Rubik's competition once. That blew my mind. Little kids, solving them in just a few seconds!

When working with selections, use console.log() liberally, or just check things in the console. Don't trust me when I say "this will include paragraphs" or whatever. Just log that value out and poke at it yourself. :) That will help it all make sense!

from d3-book.