Question

我正在尝试用d3.js制作带有弯曲标签的圆环图，但我所得到的只是中间所有标签的图表。这是我的代码和工作示例：

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

我错过了什么？

Answer 1

错误在于您设置了.text的{{1}}属性，但您应该在svg:text上设置

以下是在svg:textPath之后移动.text在代码中执行此操作的方法：

append("textPath")

我还使用每个弧的硬编码偏移更改了线段偏移的完成方式。看看codepen上的完整代码：

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

带弯曲标签的d3圆环图

1 个答案: