d3.js에 텍스트 추가

var 데이터에서 원으로 텍스트를 추가하려면 어떻게해야합니까? 라벨에서 말한거야?d3.js에 텍스트 추가

내 코드 :

<!Doctype html> 
    <html> 
     <head> 
      <title>Dobble</title> 
      <meta charset="utf-8"> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
     </head> 

     <body> 
      <div id="canvas"></div> 
      <script type="text/javascript"> 
       var w = 640, 
        h = 480; 

       var data = { 
       name : "root", 
       children : [ 
        { name: '1', size: 100, label: 'someText' }, 
        { name: '2', size: 85, label: 'someText' }, 
        { name: '3', size: 70, label: 'someText' }, 
        { name: '4', size: 55, label: 'someText' }, 
        { name: '5', size: 40, label: 'someText' }, 
        { name: '6', size: 25, label: 'someText' }, 
        { name: '7', size: 10, label: 'someText' }, 
       ] 
       } 

       var canvas = d3.select("#canvas") 
       .append("svg:svg") 
       .attr('width', w) 
       .attr('height', h); 

       var nodes = d3.layout.pack() 
       .value(function(d) { return d.size; }) 
       .size([w, h]) 
       .nodes(data); 

       nodes.shift(); 

       canvas.selectAll('circles') 
        .data(nodes) 
       .enter().append('svg:circle') 
        .attr('cx', function(d) { return d.x; }) 
        .attr('cy', function(d) { return d.y; }) 
        .attr('r', function(d) { return d.r; }) 
        .attr('fill', 'white') 
        .attr('stroke', 'grey'); 

      </script> 
     </body> 
    </html>

출처

2017-05-13 Shinzoo

아이디어는 g 요소를 (자세한 내용에 대한 here 참조) 창조하고, 그것은 원 및 텍스트가 포함되어 있습니다.

편집 :

회전 원 안의 텍스트 :

당신은 우리가 위치를 계산 안에 다음 변환 사용할 수있는 텍스트를 회전하지만, 위치를 유지하기 위해 의 내 예를 보자 라디안 회전하는

   .attr('transform', function(d, i){ 
        var distance = d.r - 15; 
        // Converts from degrees to radians. 
        Math.radians = function(degrees) { 
        return degrees * Math.PI/180; 
        }; 

        var degrees =-90; 
        var xText = d.x - Math.cos(Math.radians(degrees))*distance; 
        var yText = d.y - Math.sin(Math.radians(degrees))*distance; 
        return "translate(" +xText + "," + yText + ") rotate(" + degrees+ ")"; 
       });

    var w = 640, 
 
         h = 480; 
 
     
 
        var data = { 
 
        name : "root", 
 
        children : [ 
 
         { name: '1', size: 100, label: 'someText' }, 
 
         { name: '2', size: 85, label: 'someText' }, 
 
         { name: '3', size: 70, label: 'someText' }, 
 
         { name: '4', size: 55, label: 'someText' }, 
 
         { name: '5', size: 40, label: 'someText' }, 
 
         { name: '6', size: 25, label: 'someText' }, 
 
         { name: '7', size: 10, label: 'someText' }, 
 
        ] 
 
        } 
 
     
 
        var canvas = d3.select("#canvas") 
 
        .append("svg:svg") 
 
        .attr('width', w) 
 
        .attr('height', h); 
 
     
 
        var nodes = d3.layout.pack() 
 
        .value(function(d) { return d.size; }) 
 
        .size([w, h]) 
 
        .nodes(data); 
 
     
 
        nodes.shift(); 
 
     
 
        var enterEl = canvas.selectAll('circles') 
 
         .data(nodes) 
 
        .enter().append("g"); 
 
         
 
        enterEl.append('svg:circle') 
 
         .attr('cx', function(d) { return d.x; }) 
 
         .attr('cy', function(d) { return d.y; }) 
 
         .attr('r', function(d) { return d.r; }) 
 
         .attr('fill', 'white') 
 
         .attr('stroke', 'grey'); 
 
         
 
        enterEl.append('text') 
 
        .text(function(d){ return d.label }) 
 
        .style("font-size", function(d) { return Math.min(2 * d.r, (2 * d.r - 8)/this.getComputedTextLength() * 13) + "px"; }) 
 
        .attr("dy", ".35em").attr('transform', function(d, i){ 
 
         var distance = d.r - 15; 
 
         // Converts from degrees to radians. 
 
         Math.radians = function(degrees) { 
 
         return degrees * Math.PI/180; 
 
         }; 
 

 
         var degrees =-90*i; 
 
         var xText = d.x - Math.cos(Math.radians(degrees))*distance; 
 
         var yText = d.y - Math.sin(Math.radians(degrees))*distance; 
 
         return "translate(" +xText + "," + yText + ") rotate(" + degrees+ ")"; 
 
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id='canvas'></div>

출처

2017-05-13 10:01:12

기본적으로, 나는 텍스트가 중심에 있던 것을 걱정 : 그것은 방식처럼 계산에 기지/ – Shinzoo

당신이 원을 추가 | –

그럼이 예제에서 텍스트를 "가운데에 배치"할 수 있습니까? https://pastebin.com/HhLEvmq4 – Shinzoo

d3.js에 텍스트 추가

답변

관련 문제