d3 v4 Grouped Bar Chart - .data(fn).enter() is empty - d3.js

Question

I'm using this mbostock example as a guide, but it's in d3 v3. I've read that in v4, selections have changed, but this doesn't seem to be my issue since the data never changes - this is a static chart (for now).
I've got an array of objects, in which I expect to create a group (g) for each object, and two rectangles (rect) for each field1 and field2 of that object that correlate to the date. I'm able to create the groups, but when I .data(d => d) while attempting to make the rectangles, the enter group appears to be empty.
Can someone explain why this is?
jsfiddle (not working)
UPDATE: jsfiddle (working) – thanks to #gerardo-furtado
var models = [
{
"date":"2016-10-13T07:00:00.000Z",
"field1":19,
"field2":83
},
{
"date":"2016-10-14T07:00:00.000Z",
"field1":67,
"field2":93
},
{
"date":"2016-10-15T07:00:00.000Z",
"field1":10,
"field2":56
},
{
"date":"2016-10-16T07:00:00.000Z",
"field1":98,
"field2":43
}
];
models = models.map(i => {
i.date = new Date(i.date);
return i;
});
var container = d3.select('body'),
width = 500,
height = 300,
margin = {top: 30, right: 20, bottom: 30, left: 50},
barPadding = .2,
axisTicks = {qty: 5, outerSize: 0, dateFormat: '%m-%d'};
var svg = container
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
var xScale0 = d3.scaleBand().range([0, width - margin.left - margin.right]).padding(barPadding);
var xScale1 = d3.scaleBand();
var yScale = d3.scaleLinear().range([height - margin.top - margin.bottom, 0]);
var xAxis = d3.axisBottom(xScale0).tickFormat(d3.timeFormat(axisTicks.dateFormat)).tickSizeOuter(axisTicks.outerSize);
var yAxis = d3.axisLeft(yScale).ticks(axisTicks.qty).tickSizeOuter(axisTicks.outerSize);
xScale0.domain(models.map(d => d.date));
xScale1.domain(['field1', 'field2']).range([0, xScale0.bandwidth()]);
yScale.domain([0, d3.max(models, d => d.field1 > d.field2 ? d.field1 : d.field2)]);
var date = svg.selectAll(".date")
.data(models)
.enter().append("g")
.attr("class", "date")
.attr("transform", d => `translate(${xScale0(d.date)},0)`);
/* Add field1 bars */
var rect = date.selectAll(".bar")
.data(d => d) // FIXME: the .enter() group seems to contain nothing
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", d => { xScale1('field1') })
.attr("y", d => { yScale(d.field1) })
.attr("width", xScale1.bandwidth())
.attr("height", d => {
return height - margin.top - margin.bottom - yScale(d.field1)
});
/* Add field2 bars */
// var rect = date.selectAll(".bar")
// .data(d => d)
// .enter()
// .append("rect")
// .attr("class", "bar")
// .attr("x", d => { xScale1('field2') })
// .attr("y", d => { yScale(d.field2) })
// .attr("width", xScale1.bandwidth())
// .attr("height", d => {
// return height - margin.top - margin.bottom - yScale(d.field1)
// });
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0,${height - margin.top - margin.bottom})`)
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);

Answer 1

In D3, data has to be an array. If you look at Bostock's example, layers is an array of arrays. This is the result of console.log(layers):
Array[4]
0:Array[58]
1:Array[58]
2:Array[58]
3:Array[58]
Thus, because layers is an array of arrays, when later in the code Bostock writes this:
.data(function(d) { return d; })
He is passing an array to data, which works.
However, in your code, you're passing a object to data in your enter selection for rect:
Object {date: Thu Oct 13 2016 18:00:00 GMT+1100, field1: 19, field2: 83}
Solution: pass an array to data. This is the only change I made:
.data(d => [d])
Now you have an array:
[{date:Thu Oct 13 2016 18:00:00 GMT+1100, field1: 19, field2: 83}]
Here is your updated fiddle: https://jsfiddle.net/96d3wtys/
PS: you'll have to adjust the y and height of your bars.