basics grouped

D3.md

@@ -4,54 +4,51 @@
 
 ### Selection
 
-- `d3.select()`
+```javascript
-	- like document.querySelector()
+d3.select('css selector') //like document.querySelector()
-- `d3.selectAll()`
+d3.selectAll() //like document.querySelectorAll()
-	- like document.querySelectorAll()
+d3.select('main').selectAll('span'); //can chain to select ancestors
-- can make selections from within selections
+```
-	-`d3.select('main').selectAll('span');`
 
 ### .style()
 
-- sets the style for an element
+```javascript
-	- `d3.select('div').style('color', 'orange');`
+d3.select('div').style('color', 'orange'); //sets the style for an element
-- can pass an object
+d3.select('div').style({'color': 'blue', 'font-size': '40px'}); //can pass an object
-	- `d3.select('div').style({'color': 'blue', 'font-size': '40px'});`
+d3.select('div').style('color', 'orange').style({'color': 'blue', 'font-size': '40px'}); //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'});`
 
 ### .attr()
 
-- adds/changes an attribute on an selection
+```javascript
-- `d3.select('div').attr('anExampleAttribute', 'someValue');`
+d3.select('div').attr('anExampleAttribute', 'someValue'); //adds/changes an attribute on an selection
+```
 
 ### .classed()
 
-- checks to see if all elements in selection contain the chosen class
+```javascript
-- `d3.selectAll('.house').classed('house');`
+d3.selectAll('.house').classed('house'); // returns true if all elements in selection contain the chosen class
-	- returns true
+d3.selectAll('div').classed('frog', true); //adds the class and returns the selection
-- `d3.selectAll('div').classed('house');`
+d3.selectAll('div').classed('frog', false); //removes the class and returns the selection
-	- 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
+```javascript
-- returns the appended element
+d3.selectAll('div').append('span'); //append html to a selection and return appended element
-- `d3.selectAll('div').append('span')`
+```
 
 ### .html()
 
-- change the inner html of an element
+```javascript
+d3.selectAll('div').html('<span>hi</span>'); //change the inner html of an element
+```
 
 ### .text()
 
-- set the content of the selection to the exact text (no html)
+```javascript
+d3.selectAll('div').html('hi'); //set the content of the selection to the exact text (no html)
+```
 
 ## Request