3

我正在尝试使用 D3 创建一个径向轮毂和轮辐图( http://bl.ocks.org/3169420 )，它使用饼图的弧来表示与上下文节点之间的关系。换句话说，我正在尝试创建节点关系的 360 度视图。

在此处输入图像描述

在上面的示例中，“节点 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 值。

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

我最好的，

坦率

4

1 回答 1

3

这要感谢 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 Google Group 中找到：https ://groups.google.com/forum/?fromgroups#!topic/d3-js/08KVfNmlhRo

我最好的，

坦率

于 2012-07-25T15:34:59.537 回答