带有弯曲标签的d3甜甜圈图 [英] d3 donut chart with curved labels
问题描述
我正在尝试使用d3.js制作带有弯曲标签的甜甜圈图,但是我所得到的只是中间带有所有标签的图表.这是我的代码和工作示例:
I'm trying to make donut chart with curved labels with d3.js, but all i've got is chart with all labels in the middle. Here's my code and working example:
http://codepen.io/anon/pen/OVMwYr
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)) + ")"; };
}
我想念什么?
推荐答案
错误是您正在设置svg:text
的.text
属性,但是应该在svg:textPath
The mistake is that you are setting the .text
property of svg:text
but you should be setting it on svg:textPath
这是在代码中通过将.text
移到append("textPath")
之后的方式进行的操作:
Here is how to do that in code by moving the .text
after the 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上的完整代码:
I also changed the way segments offsets are done, using hardcoded offsets for every arc. Have a look at the full code on codepen:
http://codepen.io/anon/pen/GJobYd
这篇关于带有弯曲标签的d3甜甜圈图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!