Question

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

以下是小提琴 -

＆＃13;

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";  
                          };
                        });

}

＆＃13;

<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>

＆＃13;

下一步是将文字叠加在＆＃34;来源＆＃34; json在矩形上的属性。例如，第一个矩形的标签应为＆＃39; Initiate＆＃39;，在第二个矩形标签内应该是＆＃39; Dept Approver＆＃39;等等。

我使用.text尝试了这个但是没有用。有人可以帮我解决这个问题。

谢谢

Answer 1

我怀疑您是否正确使用了文字，但未正确访问datum（d）。无论哪种方式，这里是一个如何为矩形添加标签的示例：

＆＃13;

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");

}

＆＃13;

<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>

＆＃13;

在Rectangle中插入文本 - D3.js

1 个答案: