Вставить текст в Rectangle - D3.js

Я пытаюсь создать прямоугольник на основе json.Вставить текст в Rectangle - D3.js

Ниже 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>

Следующий шаг будет накладывать текст в "источнике" атрибут JSON над прямоугольниками. Например, первый прямоугольник должен иметь метку «Initiate», внутри второй метки прямоугольника должен быть «Dept Approver» и т. Д.

Я пробовал это с использованием .text, но это не сработало. Может кто-то, пожалуйста, помогите мне с этим.

Спасибо

источник

2015-04-24 kayasa

я сделал что-то с добавлением текста прямоугольники в [другой вопрос] (http://stackoverflow.com/questions/17558649/d3-tree-layout-separ-between-nodes-using-nodesize/17604710 # 17604710) Может быть, это поможет? – aug

Спасибо за ссылку – kayasa

Мое подозрение в том, что вы использовали текст правильно, но не доступ к вашему datum (г) правильно. В любом случае, вот пример того, как можно добавить метки к вашим прямоугольники:

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>

источник

2015-04-24 18:15:32 wahwahwah

Спасибо wahwahwah – kayasa

@kayasa - без проблем :) – wahwahwah

Вставить текст в Rectangle - D3.js

ответ

Смежные вопросы