basics reformatted

master
Matt Huntington 9 years ago
parent 8c50b6e05b
commit c9aa3f21e3

30
D3.md

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

Loading…
Cancel
Save