javascript - JS D3 textPath 不显示

Question

我有下面的代码，想知道为什么不显示文本路径？任何人都可以帮忙吗？

var areas = svg.append("g").selectAll("path")
    .data(chord.groups)
    .enter().append("path")
    .style("fill", function(d) { return fill(d.index); })
    .style("stroke", function(d) { return fill(d.index); })
    .attr("class", "bar")
    .attr("id", function(d, i) { return "group" + i; })
    .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius))
    .on("mouseover", fade(.1))
    .on("mouseout", fade(1));

svg.selectAll(".bar").append("text")
    .style("font-size", "10px")
    .attr("fill", "black")
.append("textPath")
    .attr("x", 8)
    .attr("dy", ".35em")
    .style("fill", "#ff00ff")
    .attr("xlink:href", function(d, i) { return "#group" + i; })
    .text("Textexample");

非常感谢！本杰明