大侠们好,我正在学习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的公式是我搜索来的,不是很理解,就是通过节点的坐标和偏移量来计算文字标签偏转角度, 哪位大侠能帮下忙,谢谢了
javascriptd3jshtml5svg
//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的公式是我搜索来的,不是很理解,就是通过节点的坐标和偏移量来计算文字标签偏转角度, 哪位大侠能帮下忙,谢谢了
javascriptd3jshtml5svg
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货