d3帶有彎曲標籤的圓環圖

我正在嘗試用d3.js製作帶有彎曲標籤的圓環圖，但我得到的是帶有所有標籤的圖表。這裏是我的代碼和工作示例：d3帶有彎曲標籤的圓環圖

var width = 960, 
height = 500, 
radius = Math.min(width, height)/2; 
var grad=Math.PI/180; 

var color = d3.scale.ordinal().range(["#24b4d1", "#b1da42", "#fede17", "#d0164a","#ef5822"]); 

var segmentVal=[20,40,10,60,120]; 
var segments=["label 1","label 2","label 3","label 4","label 5"]; 
var name="center>>>"; 

var arc = d3.svg.arc().outerRadius(radius - 5).innerRadius(radius - 150); 

var pie=d3.layout.pie().startAngle(-30*grad).endAngle(330*grad);  

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



var g = svg.selectAll(".arc") 
    .data(pie(segmentVal)) 
    .enter().append("g") 
    .attr("class", "arc"); 

var arcTxt = d3.svg.arc() 
.innerRadius(function(d,i){return i*35;}) 
.outerRadius(function(d,i){return (i*35+30);}) 
.startAngle(0) 
.endAngle(2 * Math.PI); 

g.append("path") 
.attr("fill", function(d, i) { return color(i); }) 
.attr("id", function(d,i){return "s"+i;}) 
.transition() 
.ease("exp") 
.ease("bounce") 
.duration(2500) 
.delay(function(d,i) { return i*10;}) 
.attrTween("d", tweenPie); 

function tweenPie(b) 
{ 
    var i = d3.interpolate({startAngle: -30*grad, endAngle: -31*grad}, b); 
    return function(t) { return arc(i(t)); }; 
} 

var text=g.append("text") 
    .text(function(d,i) { return segments[i] }) 
    .style("font-size",20) 
    .append("textPath") 
    .attr("textLength",function(d,i){return 90-i*5 ;}) 
    .attr("xlink:href",function(d,i){return "#s"+i;}) 
    .attr("startOffset",function(d,i){return 3/20;}) 
    .attr("dy","-1em") 
//.text(function(d){return d.label;}) 
/*.attr("text-anchor", "middle") 
.transition() 
.ease("exp") 
.ease("bounce") 
.duration(2500) 
.delay(function(d,i) { return i*10;}) 
.attrTween("transform", tweenText);*/ 

function tweenText(b) 
{ 
var i = d3.interpolate({startAngle: -30*grad, endAngle: -31*grad}, b); 
return function(t) { return "translate(" + arc.centroid(i(t)) + ")"; }; 
}

我缺少什麼？

來源

2015-05-11 user3782731

的錯誤是，你要設置的svg:text的.text財產，但你應該把它放在svg:textPath

下面是如何通過移動.text後append("textPath")做，在代碼：

var text = g.append("text") 
    .style("font-size", 20) 
    .append("textPath") 
    .text(function(d, i) { 
    return segments[i]; 
    }) 
    .attr("textLength", function(d, i) { 
    return 90 - i * 5; 
    }) 
    .attr("xlink:href", function(d, i) { 
    return "#s" + i; 
    }) 
    .attr("startOffset", function(d, i) { 
    return segmentOffsets[i]; 
    })

我還改變了段偏移的方式，使用每個弧的硬編碼偏移量。看看codepen上的完整代碼：

http://codepen.io/anon/pen/GJobYd

來源

2015-05-12 10:42:09 cyon

d3帶有彎曲標籤的圓環圖

回答

相關問題