[求解] d3.js 根据文字坐标和位移计算偏转角度的公式求解

[Im姜_James姜]

大侠们好,我正在学习d3.js里面的sunburst图, 基本上是在研究这个例子

http://bl.ocks.org/mbostock/4348373

当然例子里面不包括给每个数据区块加入文字标签,所以问了谷歌以后又加入了这部分:

//x,y方法定义
 var x = d3.scale.linear()
            .range([0, 2*Math.PI])
 var y = d3.scale.sqrt()
            .range([0,radius])

//对于g节点的定义 
 var g = svg.selectAll("g")
                .data(nodes)
                .enter()

...

var text = g.append("text")
                .attr("transform", function(d) {                    
                    return "rotate(" + (x(d.x + d.dx / 2) - Math.PI / 2) / Math.PI * 180 + ")";
                })
                .attr("x", function(d) { return y(d.y); } )
                .attr("dx", function(d){return d.dx})
                .attr("dy", "35em")
                .style("font-size", "16px")

可以看到text标签已经加入,而且按照各自角度偏转,上面那段代码里面计算的rotate的公式是我搜索来的,不是很理解,就是通过节点的坐标和偏移量来计算文字标签偏转角度, 哪位大侠能帮下忙,谢谢了

[Im姜_James姜]

找到一篇文章讲了 一点点 思路就是首先利用scale.linear([0,2*Pi])求出当前弯曲的矩形所占的弧度，再减去offset， 最后转化为偏转角度。 注意d3js的圆的0度是从正上方12点位置起，而svg是从最右边3点位置起