D3:Learning:Selectors:select + apply attributes

by Sky Sigal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="viz">
  <p>Uno</p>
  <p>Dos</p>
  <p>Tres</p>
</div>

CSS

p.bigger {font-size:1.5em;font-weight:bold;margin-left:1em;}

JavaScript

jQuery(document).ready(function() {

    //use d3:
  d3
  //Within a specific div:
  .select("#viz")
    //select a single P (we're not using selectAll
      .select("p")
  //give it a class (rather than remove, which would be false):
      .classed("bigger",true)
  //and a style:
      .style("color","red")
  //and attach an attribute:
      .attr("title","A hover text")
  //change it's text:
      .text("before Yay")
  //and html:
      .html("Yay!")
      //.property("checked", "true")//Useful for INPUTs and old TABLE elements.
      ;

});