d3.js - D3 中基于圆弧的文本对齐

Question

我正在尝试创建一个 Radial Hub and Spoke diagram ( http://bl.ocks.org/3169420 ) 和 D3，它使用饼图的弧来表示与上下文节点的关系和/或来自上下文节点的关系。换句话说，我正在尝试创建节点关系的 360 度 View 。

在上面的示例中，“节点 1”位于中心。我无法获取相关节点 #8 - #18 的文本节点名称以在轮子“外部”对齐。谁知道最好的方法是什么？

我使用的代码如下所示...

    // Add node names to the arcs, translated to the arc centroid and rotated.
    arcs3.filter(function(d) {
      return d.endAngle - d.startAngle > .2; }).append("svg:text")
        .attr("dy", "5px")
        .attr("angle", function(d) { return angle(d); })
        .attr("text-anchor", function(d) { return angle(d) < 0 ? "start" : "end"; })
        .attr("transform", function(d) { //set text'ss origin to the centroid
           // Make sure to set these before calling arc.centroid
           d.innerRadius = (height/2); // Set Inner Coordinate
           d.outerRadius = (height/2); // Set Outer Coordinate
           return "translate(" + arc3.centroid(d) + ")rotate(" + angle(d) + ")";
         })
        .style("fill", "Black")
        .style("font", "normal 12px Arial")
        .text(function(d) { return d.data.name; });

    // Computes the angle of an arc, converting from radians to degrees.
    function angle(d) {
      var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
      return a > 90 ? a - 180 : a;
    }

问题似乎是我需要评估节点标签放置位置的 X 和 Y 坐标。但是，我似乎无法正确找到/访问那些 X 和 Y 值。

提前感谢您提供的任何帮助。

我最好的，

弗兰克

Answer 1

感谢 Ger Hobbelt 的帮助...简而言之，角度函数需要参数化:

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

完整的答案可以在d3.js谷歌群中找到:https://groups.google.com/forum/?fromgroups#!topic/d3-js/08KVfNmlhRo

我最好的，

弗兰克