d3.js Playing with Selections

One should have a good understanding of selections, it is worth playing with a sandbox and explore the various options you have. I adopted the tutorial from Mike here.

Lets assume we have a simple HTML table:

<!DOCTYPE html>
        <script type="text/javascript" src="lib/d3.v2.min.js"></script>
                <tr><td>  A</td><td>  B</td><td>  C</td><td>  D</td></tr>
                <tr><td>  0</td><td>  1</td><td>  2</td><td>  3</td></tr>
                <tr><td>  4</td><td>  5</td><td>  6</td><td>  7</td></tr>
                <tr><td>  8</td><td>  9</td><td> 10</td><td> 11</td></tr>
                <tr><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
        <script type="text/javascript">
           //nothing yet

HTML table

Now lets select various combinations of the table structure and its cells by inserting a select statement in the <script> section and replace the text with “0”

Complete table


All cells


All cells of the body

d3.selectAll("tbody td").text("0");

One specific row using an ID

First row

<tr id="row1" ><td>  0</td><td>  1</td><td>  2</td><td>  3</td></tr>
d3.selectAll("#row1 td").text("0");

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s