title: Insert text in Rectangle - D3.js
body: <p>I am trying to create a rectangle based on a json.</p>
  
  <p>Below is the Fiddle -</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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";  
                            };
                          });
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;  
      &lt;h2&gt;D3&lt;/h2&gt;
    
    
    &lt;div id="chart"&gt;&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>I tried this using .text but it did not work. Can someone please help me with this.</p>
  
  <p>Thank you</p>