Skip to content

Instantly share code, notes, and snippets.

@mostaphaRoudsari
Created July 17, 2017 12:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mostaphaRoudsari/4e2b6f05975af5f900f5e8ec1120fabe to your computer and use it in GitHub Desktop.
Save mostaphaRoudsari/4e2b6f05975af5f900f5e8ec1120fabe to your computer and use it in GitHub Desktop.
01_workshop_select and append
license: mit
<!DOCTYPE html>
<head>
<title>d3js workshop - data binding</title>
<script src="http://d3js.org/d3.v3.js"></script> <!-- import D3 library -->
</head>
<body>
<div id="selectMe" class="selectMe">
Select me if you can!
</div>
<br>
<div id="doNotSelectMe" class="doNotSelectMe">
Keep distance! Thanks.
</div>
<script type="text/javascript">
// you can select items with d3 based on element type, id,
// class, or combination of them here are some examples
// this will select all divs and update the text
// d3.selectAll('div').text("You are selected!");
// this will select only divs with class selectMe
// d3.selectAll('div.selectMe').text("You are selected!") ;
// or any element that is classed as selectMe
// d3.selectAll('.selectMe').text("You are selected!");
// this will select only divs with id selectMe
// d3.selectAll('div#selectMe').text("You are selected!");
// and you can append items to your selection
// let's select body and append a new div
// check the order of elements in HTML page
// and also I'm using select this time!
// d3.select('body')
// .append('div')
// .text("I'm the new div added by d3! Yo!");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment