在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导入的问题。如果您想尝试，请在本地系统上尝试）。

谢谢。

- Chait

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;  
            };  
    }); 
}

更新了代码演示。

- Mark