Insert text in Rectangle - D3.js

Question

I am trying to create a rectangle based on a json.

Below is the Fiddle -

window.onload = function () { 
    var links = [
       { "source": "Initiate", "target": "Dept Approver", "status" : "completed", "type" : "process" },
       { "source": "Dept Approver", "target": "Section Approver", "status" : "completed", "type" : "process" },
       { "source": "Section Approver", "target": "Division Approver", "status" : "completed", "type" : "process" },
       { "source": "Division Approver", "target": "End", "status" : "pending", "type" : "process" }];


    var svgContainer = d3.select("#chart").append("svg")
                                     .attr("width", 800)
                                     .attr("height", 800)
                   .style("background", "#93A1A1");
                   
    var rectangles = svgContainer.selectAll("rect")
                          .data(links)
                          .enter()
                          .append("rect");

    var x = 50;
    var y = 50;
                          
    var rectAttributes = rectangles
                       .attr("x", function (d) { 
                          x = x + 150;
                          return x; 
                        })
                       .attr("y", function (d) { return y; })
                       .attr("height", function (d) { return '100'; })
                       .attr("width", function (d) { return '100'; })
                       .style("fill", function(d) { 
                          if (d.status == "completed") {
                              return "green";  
                          };
                        });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>  
    <h2>D3</h2>
  
  
  <div id="chart"></div>
</body>

Next step would be to overlay the text in the "source" attribute of json over the rectangles. For instance, first rectangle should have the label of 'Initiate', inside second rectangle label should be 'Dept Approver' and so on.

I tried this using .text but it did not work. Can someone please help me with this.

Thank you

I did something with appending text to rectangles in [another question](http://stackoverflow.com/questions/17558649/d3-tree-layout-separation-between-nodes-using-nodesize/17604710#17604710) maybe it'll help? — aug, Apr 24 '15 at 17:44

score 1 · Accepted Answer · answered Apr 24 '15 at 18:15

My suspicion is that you were using text correctly, but not accessing your datum (d) properly. Either way, here is an example of how you can add labels to your rectangles:

window.onload = function() {
  var links = [{
    "source": "Initiate",
    "target": "Dept Approver",
    "status": "completed",
    "type": "process"
  }, {
    "source": "Dept Approver",
    "target": "Section Approver",
    "status": "completed",
    "type": "process"
  }, {
    "source": "Section Approver",
    "target": "Division Approver",
    "status": "completed",
    "type": "process"
  }, {
    "source": "Division Approver",
    "target": "End",
    "status": "pending",
    "type": "process"
  }];


  var svgContainer = d3.select("#chart").append("svg")
    .attr("width", 800)
    .attr("height", 800)
    .style("background", "#93A1A1");

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

  var x = 50;
  var y = 50;

  var rectAttributes = rectangles
    .attr("x", function(d) {
      x = x + 150;
      return x;
    })
    .attr("y", function(d) {
      return y;
    })
    .attr("height", function(d) {
      return '100';
    })
    .attr("width", function(d) {
      return '100';
    })
    .style("fill", function(d) {
      if (d.status == "completed") {
        return "green";
      };
    });

  var tX = 100;
  var tY = 100;

  var labels = svgContainer.selectAll('text')
    .data(links)
    .enter()
    .append('text')
    .text(function(d) {
      return d.source; // d = links, you can access it just like any json object
    })
    .attr("x", function(d, i) {
      tX = tX + 150;
      return tX;
    })
    .attr("y", function(d) {
      return tY;
    })
    .attr("font-size", "11px")
    .attr("fill", "white")
    .attr("text-anchor", "middle");

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
  <h2>D3</h2>


  <div id="chart"></div>
</body>

Insert text in Rectangle - D3.js

1 Answers1