D3文字没有出现在我的弧线上

Question

http://jsfiddle.net/xu77zz1m/

我有一个从网上撤下的例子。当我尝试使用它将它附加到路径时，我无法弄清楚为什么没有文本出现。

path.append('text')
  .attr('transform', function(d) { return "translate(" + arc.centroid(d) + ")"; })
  .attr('dy', "0.35em")
  .attr('style', "color: white; font-size: 50px;")
  .text(function(d) {return "hellos"; });

它在html中显示为我正在输入的正确文字的标签，但页面上没有任何内容显示。

怎么回事？

Answer 1

SVG路径（或诸如rect和circle之类的SVG形状）不能附加文本。你需要为每个弧提供一个父'g'元素，它可以包括路径和文本元素。

var arcs =svg.selectAll('.'+className)
                .data(pie(dataset))
                .enter()
                .append('g')

   var path = arcs.append('path')
            //etc

   arcs.append('text')
            //etc