Core Functions and Knowledge

Question 1

What is the .select(…) method?

Answer 1

Takes a CSS3-type selector or a node.

Returns the first element in the DOM that matches the selector.

Question 2

What is the .selectAll(…) method?

Answer 2

Takes a CSS3-type selector or a node.

As an example of the latter, consider d3.selectAll(this.childNodes), which might be inside an event listener.

Returns the all elements in the DOM that match the selector.

Question 3

What is the .style(…) method?

Answer 3

Takes two arguments: (“attribute”,”value”) and operates on a selection.

When “value” is omitted, returns the current value of the given attribute.

Question 4

What is a selection?

Answer 4

A selection is an array (technically, a sub-class of an Array) of elements pulled from the current document. D3 uses CSS3 to select elements.

One nuance is that selections are grouped: rather than a one-dimensional array, each selection is an array of arrays of elements.

Question 5

How do you select by tag?

Answer 5

Pass the element tag to the select function.

E.g., d3.select(“div”)

Question 6

How do you select by element id?

Answer 6

Pass the id to the select function.

E.g., d3.select(“myId”)

Question 7

How do you select by class?

Answer 7

Pass the class to the select function.

E.g., d3.select(“.myClass”)

Question 8

How do you select by attribute?

Answer 8

Pass the attribute to the select function with the proper syntax.

E.g., d3.select(“[color=red]”)

Question 9

How do you select by an element’s containment?

Answer 9

Pass the correct order of containment to the select function.

E.g., d3.select(“parent child”)

Question 10

How do you put logic into selection statements?

Answer 10

Selectors can be intersected (“.this.that” for logical AND) or unioned (“.this, .that” for logical OR)

Question 11

How do you get / set an attribute?

Answer 11

.attr(name [,value])

If value is specified, sets the attribute with the specified name to the specified value on all selected elements. If value is a constant, then all elements are given the same attribute value; otherwise, function syntax applies.

If value is not specified, returns the value of the specified attribute for the first non-null element in the selection. This is generally useful only if you know that the selection contains exactly one element.

Question 12

How do you get / set a class?

Answer 12

.classed(name[,value])

If value is specified, sets whether or not the specified class is associated with the selected elements.

If value is a constant and truthy, then all elements are assigned the specified class, if not already assigned; if falsey, then the class is removed from all selected elements, if assigned.

If value is a function, uses the typical function rules

If you want to set several classes at once, use an object literal like so: selection.classed({‘foo’: true, ‘bar’: false}).

Question 13

What’s the syntax for an anonymous function passed to a selection operator?

Answer 13

If “value” is a function, then the function is evaluated for each selected element (in order), being passed the current datum d and the current index i, with the this context as the current DOM element. The function’s return value is then used to set each element’s attribute.

Question 14

How do you get / set style for a selection?

Answer 14

selection.style(attr[, value[, priority]])

If value is specified, sets the CSS style property with the specified name to the specified value on all selected elements. If value is a constant, then all elements are given the same style value; otherwise, accepts a function.

An optional priority may also be specified, either as null or the string “important” (without the exclamation point).

If you want to set several style properties at once, use an object literal like so: selection.style({‘stroke’: ‘black’, ‘stroke-width’: 2})

Question 15

How do you get / set property for a selection?

Answer 15

selection.property(name[, value])

Some HTML elements have special properties that are not addressable using standard attributes or styles. For example, form text fields have a value string property.

If value is specified, sets the property with the specified name to the specified value on all selected elements.

If you want to set several properties at once, use an object literal like so: selection.property({‘foo’: ‘bar’, ‘baz’: ‘qux’}).

If value is not specified, returns the value of the specified property for the first non-null element in the selection.

Question 16

How do you set the text inside a selection?

Answer 16

selection.text([value])

If value is specified, replaces all child elements of selection.

Otherwise, returns text of first non-null element in selection.

Question 17

How do you set the html inside a selection?

Answer 17

selection.html([value])

If value is specified, replaces all child elements of selection with given html.

Question 18

How do you sub-select elements?

Answer 18

Method chain selection calls.

E.g., d3.select(“body”).selectAll(“div”)

Question 19

How do you append an element to a selection?

Answer 19

selection.append(value)

E.g.,

d3.select(“body”).append(“header”)

Question 20

How do you insert an element above another element?

Answer 20

selection.append(to_insert, inserting_above)

E.g., d3.select(“body”).insert(“div”,”footer”)

places a div above the footer

Question 21

How do you remove a selection?

Answer 21

.remove()