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

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

Of course you can achieve this by using the nth-child selector or selection iterator function via each, but there are cases where these options are just too cumbersome and inconvenient. This is when you might find dealing with raw selection array as a more convenient approach. In this example, we will see how 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 rows = d3.selectAll("tr");// <-- A

    var headerElement = rows[0][0];// <-- B

    d3.select(headerElement).attr("class","table-header");// <--C

    d3.select(rows[0][1]).attr("class","table-row-odd"); //<-- D
    d3.select(rows[0][2]).attr("class","table-row-even"); //<-- E
    d3.select(rows[0][3]).attr("class","table-row-odd"); //<-- F
</script>

This recipe generates the following visual output:

Raw selection manipulation

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.

On line A, we select all rows and store the selection in the rows variable. D3 selection is stored in a two-dimensional JavaScript array. The selected elements are stored in an array then wrapped in a single element array. Thus in order to access the first selected element, you need to use rows[0][0] and the second element can be accessed with rows[0][1]. As we can see on line B, the table header element can be accessed using rows[0][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; however since it relies on direct access to D3 selection array it creates a structural dependency in your code. In other words, if in future releases of D3 this structure ever changes, it will break your code that relies on it. Hence, it is advised to avoid raw selection manipulation unless absolutely necessary.