Question

知道为什么以下函数没有将当前数据与质心的角度对齐吗？

g.append("svg:text") //append an element with the name "text"
    .attr("transform", function(d,i) { return "translate(" + arc.centroid(d) + ")" + "rotate(" + (270 + d.startAngle + (d.startAngle - d.endAngle)/2) + ")"; })
  .attr("dy", ".35em")
  .style("text-anchor", "middle")
  .text(function(d) { return d.data.word; });

默认情况下，每个文本都应该是90度，所以我旋转270以对齐y轴，然后添加当前基准的startAngle以到达饼图中的部分，然后添加（d.startAngle - d.endAngle）/ 2到达质心的角度，即arc.centroid（d）。有任何想法吗？非常感谢你。

Answer 1

以下是我找到的解决方案（http://bl.ocks.org/Guerino1/2295263）：

.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")" + "rotate(" + angle(d) + ")"; })

，其中

function angle(d) {
  var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
  return a > 90 ? a - 180 : a;
}

计算弧的角度，从弧度转换为度。

d3，将文本与质心角对齐

1 个答案: