Question

我正在尝试围绕圆圈旋转和定位文本元素我目前有以下数据结构：

<g class="node" transform="translate(670.9158935546875,154.62908935546875)">
<circle r="5"></circle>
<text x="7" y="3" class="text" transform="rotate(-69.54545454545455)" title="20.454545454545457" style="text-anchor: start;">
  Syrian Arab Republic 
</text>
</g>

我使用饼图布局将包含圆圈和文字的g节点定位在圆圈上。

然后我使用以下代码旋转标签

d3.selectAll(".text")
  .attr("transform", function(d) { return "rotate(" + (d.angle - 90) + ")" +  ((d.angle>180)? "rotate(180)" : "")  })
  .style("text-anchor", function(d) { 
  return (d.angle > 180 ? "end" : "start"); });

这给了我这个输出：

http://postimg.org/image/sgwv8uxax/

正如您所看到的，圆圈左侧文本的位置已关闭：（

有人可以给我一个关于如何均匀纠正这个位置的提示吗？理想情况下，不需要更改XML数据结构布局。

非常感谢！

Answer 1

解决此问题的一种方法是在text-anchor为end时简单地添加水平偏移：

.attr("dx", function(d) { return (d.angle > 180 ? 10 : 0); })

D3围绕饼图旋转文本

1 个答案: