使用Arc.centroid来绘制圆圈-但是文本不与它一起使用，为什么？

Question

我已经使用arc.Centroid尝试在带标签的圆弧上绘制圆。但是，标签不会留下来吗？

force.on("tick"，function() {

 text.attr("x", function(d) { return d.x + 6; })
     .attr("y", function(d) { return d.y + 4; });           

   node.attr("transform", function(d,i) {

   return "translate(" + arc[i].centroid(d) + ")"; })                                         

})；

我尝试放置质心和弧线而不是x& y。如何将我的圆圈与文本放在一起？http://jsfiddle.net/xwZjN/20/

也就是说，如果我有更多的json数据，我是否可以限制绘图只进入每个部分，例如每个部分是一个类别？

任何帮助都是最好的。我认为解决方案可能类似于此-- http://jsfiddle.net/nrabinowitz/GQDUS/

Answer 1

对于您的应用程序来说，force布局似乎不是正确的选择。尝试将符号和文本分组到g元素中，并将它们放置在计算出的坐标处。查看更新的小提琴无强制布局：http://jsfiddle.net/xwZjN/26/

var node = svg.selectAll("g.node")
    .data(nodes)
  .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d,i) {
      return "translate(" + arc[i].centroid() + ")"; 
    });

node.append("path")
    .attr("d", d3.svg.symbol().type(function(d) { return d.type; }))
    // change (0,0) for exact symbol placement
    .attr("transform", "translate(0,0)")
    .style("fill", "blue" );

node.append("text") 
      .text(function(d) { return d.Name; })
      // shift text in nice position
      .attr("x", 10)
      .attr("y", 5);