javascript - 在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 fiddle 中没有看到任何东西，则可能是 d3 import 的问题。如果您愿意，请在您的本地系统上尝试)

谢谢

Answer 1

我会直接解析路径并从中获取信息:

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 .