|
|
|
|
@ -2,53 +2,67 @@
|
|
|
|
|
|
|
|
|
|
## Basics
|
|
|
|
|
|
|
|
|
|
- Selection
|
|
|
|
|
- `d3.select()`
|
|
|
|
|
- like document.querySelector()
|
|
|
|
|
- `d3.selectAll()`
|
|
|
|
|
- like document.querySelectorAll()
|
|
|
|
|
- can make selections from within selections
|
|
|
|
|
-`d3.select('main').selectAll('span');`
|
|
|
|
|
- .style()
|
|
|
|
|
- sets the style for an element
|
|
|
|
|
- `d3.select('div').style('color', 'orange');`
|
|
|
|
|
- can pass an object
|
|
|
|
|
- `d3.select('div').style({'color': 'blue', 'font-size': '40px'});`
|
|
|
|
|
### Selection
|
|
|
|
|
|
|
|
|
|
- `d3.select()`
|
|
|
|
|
- like document.querySelector()
|
|
|
|
|
- `d3.selectAll()`
|
|
|
|
|
- like document.querySelectorAll()
|
|
|
|
|
- can make selections from within selections
|
|
|
|
|
-`d3.select('main').selectAll('span');`
|
|
|
|
|
|
|
|
|
|
### .style()
|
|
|
|
|
|
|
|
|
|
- sets the style for an element
|
|
|
|
|
- `d3.select('div').style('color', 'orange');`
|
|
|
|
|
- can pass an object
|
|
|
|
|
- `d3.select('div').style({'color': 'blue', 'font-size': '40px'});`
|
|
|
|
|
- style will return the selection for chaining
|
|
|
|
|
- `d3.select('div').style('color', 'orange').style({'color': 'blue', 'font-size': '40px'});`
|
|
|
|
|
- .attr()
|
|
|
|
|
- adds/changes an attribute on an selection
|
|
|
|
|
- `d3.select('div').attr('anExampleAttribute', 'someValue');`
|
|
|
|
|
- .classed()
|
|
|
|
|
- checks to see if all elements in selection contain the chosen class
|
|
|
|
|
- `d3.selectAll('.house').classed('house');`
|
|
|
|
|
- returns true
|
|
|
|
|
- `d3.selectAll('div').classed('house');`
|
|
|
|
|
- returns false if not all divs contain class `house`
|
|
|
|
|
- chaining doesn't work since it returns true or false
|
|
|
|
|
- can add the class using
|
|
|
|
|
- `d3.selectAll('div').classed('frog', true);`
|
|
|
|
|
- returns the selection, so you can chain
|
|
|
|
|
- can remove the class using
|
|
|
|
|
- `d3.selectAll('div').classed('frog', false);`
|
|
|
|
|
- .append()
|
|
|
|
|
- append html to a selection
|
|
|
|
|
- returns the appended element
|
|
|
|
|
- `d3.selectAll('div').append('span')`
|
|
|
|
|
- .html()
|
|
|
|
|
- change the inner html of an element
|
|
|
|
|
- .text()
|
|
|
|
|
- set the content of the selection to the exact text (no html)
|
|
|
|
|
- `d3.select('div').style('color', 'orange').style({'color': 'blue', 'font-size': '40px'});`
|
|
|
|
|
|
|
|
|
|
### .attr()
|
|
|
|
|
|
|
|
|
|
- adds/changes an attribute on an selection
|
|
|
|
|
- `d3.select('div').attr('anExampleAttribute', 'someValue');`
|
|
|
|
|
|
|
|
|
|
### .classed()
|
|
|
|
|
|
|
|
|
|
- checks to see if all elements in selection contain the chosen class
|
|
|
|
|
- `d3.selectAll('.house').classed('house');`
|
|
|
|
|
- returns true
|
|
|
|
|
- `d3.selectAll('div').classed('house');`
|
|
|
|
|
- returns false if not all divs contain class `house`
|
|
|
|
|
- chaining doesn't work since it returns true or false
|
|
|
|
|
- can add the class using
|
|
|
|
|
- `d3.selectAll('div').classed('frog', true);`
|
|
|
|
|
- returns the selection, so you can chain
|
|
|
|
|
- can remove the class using
|
|
|
|
|
- `d3.selectAll('div').classed('frog', false);`
|
|
|
|
|
|
|
|
|
|
### .append()
|
|
|
|
|
|
|
|
|
|
- append html to a selection
|
|
|
|
|
- returns the appended element
|
|
|
|
|
- `d3.selectAll('div').append('span')`
|
|
|
|
|
|
|
|
|
|
### .html()
|
|
|
|
|
|
|
|
|
|
- change the inner html of an element
|
|
|
|
|
|
|
|
|
|
### .text()
|
|
|
|
|
|
|
|
|
|
- set the content of the selection to the exact text (no html)
|
|
|
|
|
|
|
|
|
|
## Request
|
|
|
|
|
|
|
|
|
|
- AJAX functions
|
|
|
|
|
- `d3.json('path', function(error, data){});`
|
|
|
|
|
- `d3.csv('path', function(error, data){});`
|
|
|
|
|
- `d3.text('path', function(error, data){});`
|
|
|
|
|
- `d3.html('path', function(error, data){});`
|
|
|
|
|
- `d3.tsv('path', function(error, data){});`
|
|
|
|
|
- `d3.xml('path', function(error, data){});`
|
|
|
|
|
AJAX funcions look
|
|
|
|
|
|
|
|
|
|
- `d3.json('path', function(error, data){});`
|
|
|
|
|
- `d3.csv('path', function(error, data){});`
|
|
|
|
|
- `d3.text('path', function(error, data){});`
|
|
|
|
|
- `d3.html('path', function(error, data){});`
|
|
|
|
|
- `d3.tsv('path', function(error, data){});`
|
|
|
|
|
- `d3.xml('path', function(error, data){});`
|
|
|
|
|
|
|
|
|
|
## Data binding
|
|
|
|
|
|
|
|
|
|
|
