D3 围绕饼图旋转文本

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 围绕饼图旋转文本

D3 Rotating text around a pie chart

javascript

d3.js