[Solved]-When creating an HTML table with D3, use certain data for a row class rather than cell-d3.js

Possibly the easiest way to do this is to make your data an array of Objects, instead of just an Array, e.g.

{id: 1, book: ["The Caves of Steel", "Isaac Asimov"], ...}

Then you can set the data-id of each row using the id attribute, and add tds for the book. Here's the code I used to get your example working:

// Add the header
thead.append("tr")
    .selectAll("th")
    .data(columns.slice(1, columns.length)) // skip the first column (IDs)
    .enter()
    .append("th")
        .text(function ( d ) { return d; })

// Reformat the nested Arrays into an Array of Objects,
// then set the 'data-id' of each row
var rows = tbody.selectAll("tr")
    .data(books.map(function(d){ return {id: d[0], book: d.slice(1, d.length)}; }))
    .enter()
    .append("tr").attr("data-id", function( d ){  return d.id; });

// Append the author and title for each book
var cells = rows.selectAll("td")
    .data(function ( d ) { return d.book; })
    .enter()
    .append("td")
    .text(function( d ) { return d; });