Modify DOM Elements with D3 V4 Using the attr Operator
FREE     Duration: 3:46
Part of Course: D3 V4 Tutorial
 

Takeaways:

  • D3 selections allow you to modify DOM elements with the .attr operator
  • Every DOM element in the selection gets modified whether the D3 selection contains 1 or more elements
  • The D3 .attr operator works as a getter and setter
  • For it to work as a setter, you pass in an attribute you want to define and the value you want to set it to
  • You can set the value as a constant you pass in or you can have a function (named or anonymous) evaluated for each element in the selection
  • For it to work as a getter, you pass in an attribute whose value you want and you do not pass in a value
  • If the attribute exists, then you get the value
  • If the attribute does not exist, then you get a "null"
  • Using the D3 .attr as a setter, if you pass in a "null" as the value, then it deletes the attribute value pair from all of the elements in the selection

Resources:

Transcript:

Modify DOM Elements with D3 V4 Using the attr Operator

D3 selections have a special power in that they are able to modify any of these DOM nodes.


The way they do that is by using the D3 dot attr attribute operator.

Which sets the attribute value pairs.

So if we think of creating selections with tags, for whatever selection we have, we can specify an attribute equals value based on attribute comma value.

For any tag in a D3 selection.


Not only that, the D3 "attr" is a getter and setter.

That means if we don't specify a value, it will return whatever that attribute equals value pair is.

We can set the attribute equal to a constant.

Or we can set it to the result of a "named function" that gets evaluated for each specific element in the selection.

Or we can use an anonymous function here.

Let's take a look at the Chrome developer tools for this example.


We see an HTML file with six divs.

<!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>

Here we can see the actual code.

We have Div 1, Div 2, Div 3.

Inside of Div 3, we have Div 4 and Div 5.

And within Div 5 we have Div 6.


The first thing we'll do is do a:

d3.select("div").attr("abc", "123");

So we'll select the first "div" and we'll set an attribute "abc" equal to the value of "123".

And you see this flash up.

And now we can see that the first div has an attribute of "abc" equal to "123".


Next we can do a:

d3.selectAll("div").attr("los", "angeles");

So we're going to select all of the divs and set the attribute of l-o-s "los" equal to the value of "angeles".

And we see that each div now has the attribute value pair of "los=angeles".


Up to this point we've been setting the value equal to a static string that we pass.

In this case, we're going to select all the divs and we're going to set the attribute "holiday" equal to the value that is returned when this anonymous function is evaluated for each of the divs in this selection:

d3.selectAll("div").attr("holiday", function() { return "inn"; });

When we do that you see that now all of these have a "holiday" attribute equal to "inn" string.


Up until now, for each "attr" operator, we've been passing an attribute value pair.

As we spoke earlier, the "attr" works as a getter and a setter.

So for the getter, if we don't pass a value, it will return what that value is for the specific "abc" attribute:

d3.select("#d_one").attr("abc");

In this case we see that it is "abc=123".

So we receive the value which is the string "123".


When we select a div that does not contain that attribute, in this case we see that the attributes are "id", "class", "los", and "holiday" unlike the Div 1 which had the "abc":

d3.select("#d_tre").attr("abc");

It returns a "null".


Lastly, with a selection, if we pass an attribute value pair where the value is set to "null", so in this case the first div "d_one" has an attribute value pair of "abc=123", if we pass the "null" to it:

d3.select("#d_one").attr("abc", null);

You see that it disappears.

So that is a way to erase attribute value pairs.

<< Back To D3 Screencast and Written Tutorials Index