Показать текст в конце дуги в d3.js

Question

После жарки моего мозга весь день. Наконец решил спросить здесь. Я пытаюсь добавить текст в конце дуги в d3.js. Я пробовал использовать arc.cenriod(), но это удерживает текст в центре дуги. Я хочу отобразить текст в конце дуги.

var pi = Math.PI, width=600, height=400; var iR=150; var oR=110; 
startAngle = 90, endAngle = 270, innerRad=150 , outerRad=110 ; 
var new_color, hold; var max = 300, min = 0, current = 0; 
var cur_color = 'limegreen'; 

var firstValue = 100; 



var arc = d3.svg.arc().innerRadius(iR).outerRadius(oR).startAngle(-120 * (pi/180)); 

var svg = d3.select("body") 
      .append("svg") 
      .attr("width", width) 
      .attr("height", height) 
      .append("g") 
      .attr("transform", "translate(" + width/2 + "," + height/2 + ")") 

var nScale = d3.scale.linear() 
        .range([0, 240]) 
        .domain([0,300]); 
var current = svg.append("text").attr("transform", "translate(0,"+ (iR/2) +")") 
      .attr("text-anchor", "middle").style("font-size", "50").style("font-family", "Helvetica").text(current) 

var background = svg.append("path").datum({endAngle: 120 * (pi/180)}).style("fill", "none").attr("d", arc); 

setInterval(function() { 
    var dataRead =Math.random()*300 ; 
    var num = nScale(dataRead); 
    var numPi = Math.floor(num - 119) * (pi/180); 
current.transition().text(Math.floor(dataRead)); 
background 
    .transition() 
    .duration(1000) 
    .style("fill", "limegreen").call(arcTween, numPi); 



}, 2000); 
function arcTween(transition, newAngle) { 
     transition.attrTween("d", function(d) { 

      var interpolate = d3.interpolate(d.endAngle, newAngle); 
      return function(t) { 
       d.endAngle = interpolate(t); 
      ; return arc(d); 
      }; 
    }); 
} 

Вот мой jsfiddle для вышеуказанного кода. http://jsfiddle.net/chaitugoli/duo29t5k/

Здесь я хочу, чтобы текущий (текстовый элемент) двигался вместе с дугой на кончике. Как я могу получить координаты конца дуги.

Пожалуйста, дайте мне знать. Любые предложения будут помочь (если вы не видите любую вещь в скрипку Js, это, вероятно, может быть проблема импорта d3. Пожалуйста, попробуйте его на локальном компьютере, если вы хотите)

Благодаря

Answer 1

I «d разобрать путь напрямую и получить информацию от том, что:

function arcTween(transition, newAngle) { 
    transition.attrTween("d", function(d) { 
     var interpolate = d3.interpolate(d.endAngle, newAngle); 
      return function(t) { 
       d.endAngle = interpolate(t);     
       var path = arc(d); 
       var coords = path.split("L")[1].split("A")[0]; //<-- this is the position of the end of the line connecting the two arcs    
       current.attr('transform', 'translate(' + coords + ')' + 'rotate(' + (d.endAngle * 180/Math.PI) + ')'); //<-- position text and rotate it  
       return path; 
      }; 
    }); 
} 

Изменено fiddle.