在矩形中插入文本 - D3.js答案

【问题标题】：Insert text in Rectangle - D3.js在矩形中插入文本 - D3.js
【发布时间】：2015-04-24 17:40:34
【问题描述】：

我正在尝试基于 json 创建一个矩形。

下面是小提琴 -

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>

下一步是将 json 的“源”属性中的文本覆盖在矩形上。例如，第一个矩形的标签应为“Initiate”，第二个矩形内的标签应为“Dept Approver”，依此类推。

我使用 .text 进行了尝试，但没有成功。有人可以帮我解决这个问题吗？

谢谢

【问题讨论】：

我在another question 的矩形中添加了文本，也许会有所帮助？

标签： javascript d3.js

【解决方案1】：

我怀疑您正确使用了文本，但没有正确访问您的datum (d)。无论哪种方式，以下是如何为矩形添加标签的示例：

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>

【讨论】：