D3 cross tabulation HTML table - d3.js

Question

I'm trying to create a D3 cross tabulation HTML table (there will be more interactive features, this is just the first step) based on JSON data. I can populate the horizontal table header, but am having trouble with the vertical headers and data fields.
The table should look something like the following:
My code so far (JSFiddle here) is:
var nested = d3.nest()
.key(function(d) { return d._id.env; })
.entries(data.result);
console.log(nested);
var table = d3.select("#table")
.append("table")
.style("border-collapse", "collapse")
.style("border", "2px black solid");
var thead = table.append("thead");
thead.append("tr")
.selectAll("th")
.data(nested)
.enter().append("th")
.text(function(d) { return d.key; });
var tbody = table.append("tbody");
var tr = tbody.selectAll("tr")
.data(nested.values) // not sure how to get this
.enter().append("tr");
tr.selectAll("td")
.data(function(d) { console.log(d); return d; })
.enter().append("td")
.text(function(d, i) { console.log(d[i]); return d; });
The raw data is in the following format:
{
"result" : [
{
"_id" : {
"month" : 5,
"day" : 6,
"year" : 2014,
"env" : "A"
},
"ruleScore" : 83.25,
"jsPerPage" : 12,
"cssPerPage" : 4,
"imagesPerPage" : 7.75
},
{
"_id" : {
"month" : 5,
"day" : 6,
"year" : 2014,
"env" : "B"
},
"ruleScore" : 83,
"jsPerPage" : 12,
"cssPerPage" : 4,
"imagesPerPage" : 10
},
{
"_id" : {
"month" : 5,
"day" : 6,
"year" : 2014,
"env" : "C"
},
"ruleScore" : 83,
"jsPerPage" : 12,
"cssPerPage" : 5,
"imagesPerPage" : 10,
},
{
"_id" : {
"month" : 5,
"day" : 6,
"year" : 2014,
"env" : "D"
},
"ruleScore" : 83.08333333333333,
"jsPerPage" : 12,
"cssPerPage" : 6,
"imagesPerPage" : 9.25
}
],
"ok" : 1
}
I'm guessing this is pretty simple, just can't get my head around it - thanks!