CODEWITHSUNDEEP
javascriptd3.js
Instinct
Instinct

Reputation: 2261

How do I append text to my rect in d3?

Here is my code, the text is appending when I inspect the element but it is not showing up

var data = [0, 1, 2];
var width = 100;
var height = 100;

var canvas = d3.select("body")
               .append("svg")
               .attr("height", 500)
               .attr("width", 500)
               .attr("fill", "red")
               .append("g");


var someData = canvas.selectAll("rect")
                     .data(data)
                     .enter()
                        .append("rect")
                        .attr("height", height)
                        .attr("width", width)
                        .attr("fill", "red")
                        .attr("transform", function(d){ return "translate(" + height * d + ",0)";});

someData.append("text")
        .attr("transform", function(d){ return "translate(" + height * d + ",0)";})
        .attr("font-size", "2em")
        .attr("color", "black")
        .text(function(d){ return d;});

http://jsfiddle.net/2GAxG/

What did I do wrong?

Upvotes: 2

Views: 10093

Answers (2)

user3359706
user3359706

Reputation: 511

Are you trying to add text at specific positions within the canvas or within shapes on the canvas? See fiddle: http://jsfiddle.net/sjp700/6hAg7/

var margin = { top: 40, right: 4, bottom: 40, left: 20 },
  width = 800,
  height = 800;

var data = [100,200,300];

var svgContainer = d3.select("body").append("svg")
        .attr("width", 800)
        .attr("height", 800)
        .style("background", "red")
        .append('g')
        .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');


var rect = svgContainer.selectAll("rect")
                           .data(data)
                           .enter();

rect.append("rect")
    .attr("x", function(d){ return d;})
    .attr("y", function(d){ return d;})
    .attr("width", 100)
    .attr("height", 20)
    .style("fill", "lightblue");

rect.append("text")
       .style("fill", "black")
       .style("font-size", "14px")
       .attr("dy", ".35em")
       .attr("x", function (d) { return d; })
       .attr("y", function (d) { return d+10; })
       .style("style", "label")
       .text(function (d) { return d; });

Upvotes: 0

loxxy
loxxy

Reputation: 13151

Couple of Problems with your code:

  • The <text> cannot go inside a <rectangle> in svg.

  • The top level group being filled with a color, hides everything inside it.

A solution to the first point is to group the <rectangle> & <text> into sub groups of <g>

Update Code: (Demo)

var data = [0, 1, 2];
var width = 100;
var height = 100;

var canvas = d3.select("body")
               .append("svg")
               .attr("height", 500)
               .attr("width", 500)
               //.attr("fill", "red")
               .append("g");


var someData = canvas.selectAll("rect")
                    .data(data)
                    .enter()
                     .append("g")
                      .append("rect")
                      .attr("height", height)
                      .attr("width", width)
                      .attr("fill", "red")
                      .attr("transform", 
                       function(d){ return "translate(" + height * d + ",0)";});

canvas.selectAll("g")
        .append("text")
        .attr("transform", 
              function(d){ return "translate(" + height * d + ",30)";})
        .attr("font-size", "2em")
        .attr("color", "black")
        .text(function(d){ return d;});

Upvotes: 2

Related Questions