D3 V4 Data Join Scenario 2
FREE     Duration: 4: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
  • The UPDATE selection gets DOM elements that had data objects bound to them
  • The EXIT selection gets DOM elements that did not get any data bound to them
  • D3 Data Join Scenario 2 is where you have the same amount of data as DOM elements
  • In the D3 Data Join Scenario 2, the Enter selection is empty
  • In the D3 Data Join Scenario 2, the Update selection is non-empty
  • In the D3 Data Join Scenario 2, the Exit selection is empty

Resources:

Transcript:

D3 V4 Data Join Scenario 2


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:

var virtualSelection = d3.select("body").selectAll("div").data([1,2,3,4,5,6]);

d3.selectAll("div").nodes().map( function (d) { return d.__data__; });

virtualSelection;

virtualSelection.nodes();

virtualSelection.enter();

virtualSelection.enter().nodes();

virtualSelection.exit();

virtualSelection.exit().nodes();

<< Back To D3 Screencast and Written Tutorials Index