Question

I am new to d3.js and I need to design a visualization that is similar to what is described in here (http://stackoverflow.com/questions/10457170/d3-js-building-a-grid-of-rectangles/10465456#10465456) grid implementation. I am trying to add text to each of the cells having text d.value but not working.

I tried adding .text(function(d){return d.value;} to row.selectAll(“.cell”) but didn’t help. Any ideas how should I do it. I tried something like , but not sure I am doing the right thing.

col.selectAll("rect").append("text")
           .data(function (d) { return d; })
           .enter()
           .append("text")
            .text(function(d,i) {
                console.log(d);
              console.log(i);
                return d.value;
            }) 
            .attr("x", function(d) { return d.x; })
         .attr("y", function(d) { return d.y; });

My question here is how can I access d.value and add it as text to .cell?

Answer 1

Adding a text element to your <rect> elements has no intrinsic meaning, the text elements can be added outside of the rects, or you can create another sub <g> element for each cell that contains its text and the rect. jsfiddle of the first scenario here: http://jsfiddle.net/Kmf7g/1/