From c9aa3f21e3c3621d73eed1e9be6407b5aec2a857 Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Tue, 23 Aug 2016 20:43:21 -0400 Subject: [PATCH] basics reformatted --- D3.md | 100 +++++++++++++++++++++++++++++++++------------------------- 1 file changed, 57 insertions(+), 43 deletions(-) diff --git a/D3.md b/D3.md index f92621f..96b6020 100644 --- a/D3.md +++ b/D3.md @@ -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