0

我已经使用 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) + ")"; })

});

我试图用 centroid & arc[i] 代替 x & y。如何将我的圈子与文字放在一起？http://jsfiddle.net/xwZjN/20/

还说如果我有更多的 json 数据，我是否能够限制图只进入每个部分，例如每个部分都是一个类别？

任何帮助都会很棒。我认为解决方案可能与此类似 - http://jsfiddle.net/nrabinowitz/GQDUS/

4

1 回答 1

0

看来力布局不是您的应用程序的正确选择。尝试将您的符号和文本分组到一个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);
于 2012-11-03T14:41:18.113 回答