Select elements in the DOM using d3.select and d3.selectAll
Set attributes, inner text, and style properties on D3 selections
Get attribute and property values on D3 selections
Chain D3 methods together to make more complex changes to the DOM
Pass callback functions into D3 selection methods for more dynamic behavior
Add event listeners using the 'on' method
Use d3.event to access the event object inside of an event listener
Add and remove DOM elements with D3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your awesome title</title>
</head>
<body>
<!-- HTML goes here - check the links for an example! -->
<script src="https://d3js.org/d3.v4.js"></script>
</body>
</html>
Code: http://bit.ly/2sDYffB
Live site: http://bit.ly/2rVJ4QU
selection.style(property [, newValue])
style, attr, text, and html methods
selection.attr(attribute [, newValue])
selection.text([newValue])
selection.html([newValue])
Note: These (and other!) D3 methods will work as getters if no newValue is passed in.
classed method
selection.classed(classList [, shouldClassesBeSet])
space-separated list
checks whether classes should be added or removed
Live site: http://bit.ly/2rVJ4QU
Code: http://bit.ly/2sDYffB
selection.style(property [, newValue])
selection.attr(attribute [, newValue])
selection.text([newValue])
selection.html([newValue])
selection.style(property [, callback])
selection.attr(attribute [, callback])
selection.text([callback])
selection.html([callback])
The callback will be invoked once for each element in the selection.
function (_, idx) {
// write your code here
}
Don't worry about the first argument for now.
Index of the current element in the selection.
Code: http://bit.ly/2sgeVdn
Live Site: http://bit.ly/2t7svj6
selection.on(eventType, callback)
Type of event
Code to run when event is triggered
d3.event
This property on d3 will contain all of the event information when referenced inside of an event handler.
append method
selection.append(tagName)
Appends a new element of type tagName to every element in the selection.
Returns a new d3 selection.
property method
selection.property(name [, newValue])
Access a property (e.g. an input value) which is not accessible as an element attribute.
remove method
selection.remove()
Remove the selection from the DOM.