JSFiddle - React, Tailwind, and code Playground

by esbullington

HTML

<html> 
  <head> 
    <title>D3 nested selections</title> 
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script> 
    <style type="text/css">

    </style> 
  </head> 
  <body> 
        <table>
            <thead>
                <tr><td>  A</td><td>  B</td><td>  C</td><td>  D</td></tr>
            </thead>
            <tbody>
                <tr><td>  0</td><td>  1</td><td>  2</td><td>  3</td></tr>
                <tr><td>  5</td><td>  5</td><td>  6</td><td>  7</td></tr>
                <tr><td>  9</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>
            </tbody>
        </table>
  </body> 
</html>

CoffeeScript

matrix = [
  [ 0,  1,  2,  3],
  [ 4,  5,  6,  7],
  [ 8,  9, 10, 11],
  [12, 13, 14, 15],
]

td = d3.selectAll("tbody tr")
    .data(matrix)
    .selectAll('td')
    .data((d, i)-> d)
    .text((d)->d)
    .style("color", (d,i)-> "red" if i%2 is 1) 
    
console.log td