Manipulating the raw selection

Sometimes, having access to the D3 raw selection array might be beneficial in development whether it's for debugging purposes or for integrating with other JavaScript libraries, which require access to raw DOM elements; in this recipe, we will show you ways to do that. We will also see some, internal structure of a D3 selection object.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter2/raw-selection.html .

How to do it...

Of course, you can achieve this using the nth-child selector or the selection iterator function each, but there are cases where these options are just too cumbersome and inconvenient. This is when you might find dealing with the raw selection array a more convenient approach. In this example, we will see how the raw selection array can be accessed and leveraged:

<table class="table"> 
    <thead> 
    <tr> 
        <th>Time</th> 
        <th>Type</th> 
        <th>Amount</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
        <td>10:22</td> 
        <td>Purchase</td> 
        <td>$10.00</td> 
    </tr> 
    <tr> 
        <td>12:12</td> 
        <td>Purchase</td> 
        <td>$12.50</td> 
    </tr> 
    <tr> 
        <td>14:11</td> 
        <td>Expense</td> 
        <td>$9.70</td> 
    </tr> 
    </tbody> 
</table> 
 
<script type="text/javascript"> 
    var trSelection = d3.selectAll("tr"); // <-- A 
    var headerElement = trSelection.nodes()[0]; // <-- B 
    d3.select(headerElement).attr("class", "table-header"); // <-     
    - C 
    var rows = trSelection.nodes(); 
    d3.select(rows[1]).attr("class", "table-row-odd"); // <-- D 
    d3.select(rows[2]).attr("class", "table-row-even"); // <-- E 
    d3.select(rows[3]).attr("class", "table-row-odd"); // <-- F 
</script> 

This recipe generates the following visual output:

Raw selection manipulation

How it works...

In this example, we went through an existing HTML table to color the table. This is not intended to be a good example of how you would color odd versus even rows in a table using D3. Instead, this example is designed to show how raw selection array can be accessed.

Note

A much better way to color odd and even rows in a table would be using the each function and then relying on the index parameter i to do the job.

On line A, we select all rows and store the selection in the trSelection variable. D3 selection has a convenient node() function that returns an array containing the selected element nodes. Thus, in order to access the first selected element, you will need to use d3.selectAll("tr").nodes()[0], the second element can be accessed with d3.selectAll("tr").nodes()[1], and so on. As we can see on line B, the table header element can be accessed using trSelection.nodes()[0] and this will return a DOM element object. Again, as we have demonstrated in previous sections, any DOM element can then be selected directly using d3.select as shown on line C. Line D, E, and F demonstrate how each element in selection can be directly indexed and accessed.

Raw selection access could be handy in some cases especially when you need to use D3 in partnership with other JavaScript libraries since other libraries won't be able to work with D3 selection but only with raw DOM elements.

Note

Additionally, this approach is typically very useful in a testing environment where knowing the absolute index for each element quickly and gaining a reference to them could be convenient. We will cover unit tests in a later chapter in more detail.

In this chapter we covered many different ways of how HTML elements can be selected and manipulated using D3's selection API. In the next chapter, we will explore how data can be bound to such selection to dynamically drive the visual appearance of selected elements which is the fundamental step of data visualization.