Data-Driven DOM Element Modification
FREE     Duration: 7:16
Part of Course: D3 V4 Tutorial
 

Takeaways:

  • D3 Data Join results in three virtual selections - UPDATE, ENTER, EXIT
  • The ENTER selection gets data objects that were not bound to DOM elements
  • You can use the D3 append operator to create new DOM elements from the Enter selection
  • D3 will create a new DOM element for every place holder element in the Enter selection
  • Every new DOM element that D3 creates from the Enter selection, inherits the __data__ property from the place holder object
  • Using the D3 attr operator, you can define functions that access the data bound to each DOM element in the selection
  • Using the D3 attr operator, you can define functions that access the index number of each DOM element in the selection
  • Inside of the function used by the D3 attr operator, you can use the "d" argument passed to the function to access the bound data
  • Inside of the function used by the D3 attr operator, you can use the "i" argument passed to the function to access the index number
  • An anonymous function example signature looks like -> function (d, i) { ..... }

Resources:

Transcript:

Data-Driven DOM Element Modification


HTML file:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div id="d_one" class="d_small">Div 1</div>
    <div id="d_two" class="d_medium">Div 2</div>
    <div id="d_tre" class="d_large">Div 3
      <div id="d_for" class="d_medium">Div 4</div>
      <div id="d_fiv" class="d_tiny"> Div 5
        <div id="d_six" class="d_large">Div 6</div>
      </div>
    </div>
  </body>
</html>


JavaScript Console Commands Run:

d3.select("body").data(["Monday"]);


var virtualSelection = d3.select("body").selectAll("p").data([10,20,30]);

var newParas = virtualSelection.enter().append("p");

newParas.attr("d-attr", function(d, i) { return d; });

newParas.attr("i-attr", function(d, i) { return i; });

newParas.text(function(d, i) { return "Para " + i + " data: " + d; });

<< Back To D3 Screencast and Written Tutorials Index