score:2

<rect>'s don't take child elements like that unfortunately.

Here's a quick solution that you could adjust to your design needs:

var heatMap = svg.selectAll(".hour")
    .data(accidents)
    .enter().append("rect")
    .attr("x", function(d) { return (d.hour - 1) * gridSize; })
    .attr("y", function(d) { return (d.app - 1) * gridSize; })
    .attr("class", "hour bordered")
    .attr("width", gridSize)
    .attr("height", gridSize)
    .style("stroke", "white")
    .style("stroke-opacity", 0.6)
    .style("fill", function(d) { return colorScale(d.count); });

svg.selectAll(".hourlabel")
    .data(accidents)
    .enter().append("text")
    .attr("class", "hourlabel")
    .attr("x", function(d) { return (d.hour - 1) * gridSize + 12; })
    .attr("y", function(d) { return (d.app - 1) * gridSize + 18; })
    .text(function() {
        return "1";
    });

JSFiddle


Related Query