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

アイデアは（詳細についてはhere参照）g要素を作成して、それが円とテキストを含みます。のは、私の例を見てみましょう：

EDIT：

が円内のテキストを回転：

テキストを回転させるが、ポジションを維持するために、あなたはその中に、その後変換を用いることができ、我々は位置を計算そしてラジアン回転させる

   .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にテキストを追加する

答えて

関連する問題