CODEWITHSUNDEEP
javascriptd3.js
kayasa
kayasa

Reputation: 2085

Insert text in Rectangle - D3.js

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

Upvotes: 0

Views: 2180

Answers (1)

wahwahwah
wahwahwah

Reputation: 3177

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>

Upvotes: 1

Related Questions