在d3.js中添加文本

Question

如何从var数据中添加文本到圆圈？我的意思是来自标签？

我的代码：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class EditarJogador_Admin: Form
    {

        private DiagramaEntidadesContainer dbATMT;

        public EditarJogador_Admin()
        {
            InitializeComponent();
            dbATMT = new DiagramaEntidadesContainer();
        }

        private void button_EditarJogadorOk_Click_1(object sender, EventArgs e)
        {

                GestaoJogadores_Admin GestaoJogadoresAdmin = new GestaoJogadores_Admin();

                Player jogadorSelecionado = (Player)GestaoJogadoresAdmin.jogadorSelecionado;//this is what I need, but it doenst work. I get an errror:  'GestaoJogadores_Admin' does not contain a definition for 'jogadorSelecionado' and no extension method 'jogadorSelecionado' accepting a first argument of type 'GestaoJogadores_Admin' could be found (are you missing a using directive or an assembly reference?)` 
        }
    }
}

Answer 1

我们的想法是创建一个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>