From e23d7214502b49ac5262d287a63eb1491286cacc Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Tue, 23 Aug 2016 20:54:02 -0400 Subject: [PATCH] basics grouped --- D3.md | 57 +++++++++++++++++++++++++++------------------------------ 1 file changed, 27 insertions(+), 30 deletions(-) diff --git a/D3.md b/D3.md index 96b6020..1b690da 100644 --- a/D3.md +++ b/D3.md @@ -4,54 +4,51 @@ ### Selection -- `d3.select()` - - like document.querySelector() -- `d3.selectAll()` - - like document.querySelectorAll() -- can make selections from within selections - -`d3.select('main').selectAll('span');` +```javascript +d3.select('css selector') //like document.querySelector() +d3.selectAll() //like document.querySelectorAll() +d3.select('main').selectAll('span'); //can chain to select ancestors +``` ### .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'});` +```javascript +d3.select('div').style('color', 'orange'); //sets the style for an element +d3.select('div').style({'color': 'blue', 'font-size': '40px'}); //can pass an object +d3.select('div').style('color', 'orange').style({'color': 'blue', 'font-size': '40px'}); //will return the selection for chaining +``` ### .attr() -- adds/changes an attribute on an selection -- `d3.select('div').attr('anExampleAttribute', 'someValue');` +```javascript +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 -- `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);` +```javascript +d3.selectAll('.house').classed('house'); // returns true if all elements in selection contain the chosen class +d3.selectAll('div').classed('frog', true); //adds the class and returns the selection +d3.selectAll('div').classed('frog', false); //removes the class and returns the selection +``` ### .append() -- append html to a selection -- returns the appended element -- `d3.selectAll('div').append('span')` +```javascript +d3.selectAll('div').append('span'); //append html to a selection and return appended element +``` ### .html() -- change the inner html of an element +```javascript +d3.selectAll('div').html('hi'); //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