在D3js Heatmap单元上需要标签

Question

我想根据csv值在D3js热图上添加标签。

我尝试将文本附加到rect svg上，但到目前为止没有运气。我试过使用下面的矮人- https://plnkr.co/edit/IIDRsc32YGfOXakO6HEg?p=preview

使用的D3js代码如下-

<script>

        var itemSize = 35,
              cellSize = itemSize - 1,
              margin = {top: 120, right: 20, bottom: 20, left: 110};

              var width = 950 - margin.right - margin.left,
              height = 400 - margin.top - margin.bottom;

          var formatDate = d3.time.format("%Y-%m-%d");

          d3.csv('hm_data.csv', function ( response ) {

            var data = response.map(function( item ) {
                var newItem = {};
                newItem.country = item.book_type;
                newItem.product = item.hour;
                newItem.value = item.actual;

                return newItem;
            })

            var x_elements = d3.set(data.map(function( item ) { return item.product; } )).values(),
                y_elements = d3.set(data.map(function( item ) { return item.country; } )).values();

            var xScale = d3.scale.ordinal()
                .domain(x_elements)
                .rangeBands([0, x_elements.length * itemSize]);

            var xAxis = d3.svg.axis()
                .scale(xScale)
                .tickFormat(function (d) {
                    return d;
                })
                .orient("top");

            var yScale = d3.scale.ordinal()
                .domain(y_elements)
                .rangeBands([0, y_elements.length * itemSize]);

            var yAxis = d3.svg.axis()
                .scale(yScale)
                .tickFormat(function (d) {
                    return d;
                })
                .orient("left");

            var colorScale = d3.scale.threshold()
                .domain([0.85, 1])
                .range(["#2980B9", "#E67E22", "#27AE60", "#27AE60"]);

            var svg = d3.select('.heatmap')
                .append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            var cells = svg.selectAll('rect')
                .data(data)
                .enter().append('g').append('rect')
                .attr('class', 'cell')
                .attr('width', cellSize)
                .attr('height', cellSize)
                .attr('y', function(d) { return yScale(d.country); })
                .attr('x', function(d) { return xScale(d.product); })
                .attr('fill', function(d) { return colorScale(d.value); });

            cells.append("text")
                .style("fill", "black")
                .style("font-size", "14px")
                .attr("dy", ".35em")
                .style("style", "label")
                .text(function (d) { return d.value; })


            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .selectAll('text')
                .attr('font-weight', 'normal');

            svg.append("g")
                .attr("class", "x axis")
                .call(xAxis)
                .selectAll('text')
                .attr('font-weight', 'normal')
                .style("text-anchor", "start")
                .attr("dx", ".8em")
                .attr("dy", "1.2em")
                .attr("transform", function (d) {
                    return "rotate(-90)";
                });


          });
        </script>

预期结果-需要热图每个单元上的实际值

有人可以在这里帮忙吗？