Question

你好，我做了一个旭日或双层图表，它是一个馅饼的中间位置。圆环图^^当我追加所有路径时它工作正常：

this.path = this.svg.selectAll("path")
.data(this.partition.nodes(rootData).slice(1))
.enter().append("path")
.attr("d", this.arc)
.style("fill", function(d) { return d.fill; })
.each(function(d){ this._current = thiss.updateArc(d);});

但问题是，当我试图在我所有路径的中间外部添加一个圆圈，所以它不起作用，这个代码在我所有路径的中间位置添加圆圈

var indicator =  this.svg.selectAll('circle')
.data(this.partition.nodes(rootData))
.enter().append("circle")
.attr("cx", function(d){return thiss.arc.centroid(d)[0]})
.attr("cx", function(d){return thiss.arc.centroid(d)[1]})
.attr("r", 5).style('fill','#ff0000');

但是我需要在midle中添加这个小圆圈，但是在路径的外部边界上。我不知道如何获得正确的cx和cy attributs，请帮忙吗？

这是我的目标的截图（黑点是我的）和（红点是我想做的）

http://i.stack.imgur.com/GXPYM.jpg

enter image description here

Answer 1

作为三角学的替代方法，您可以使用变换来定位圆。如果转换中的第一步是旋转，然后您之后应用平移，则平移将应用于旋转坐标系。

但是，有一点额外的复杂性是，d3饼图以弧度给出角度（因为这是三角函数使用的），但是旋转需要以度为单位的角度。

  var degreesPerRadian = 180/Math.PI;
  g.append("circle") //circles inherit pie chart data from the <g>
      .attr("r", 5)
      .attr("transform", function(d) { 
          return "rotate(" +  degreesPerRadian*((d.startAngle + d.endAngle)/2) 
          + ")" +
              //rotate by the average of the start and end angle
              //Note that d3 specifies angles in radians, but the rotate
              //function needs them in degrees
              "translate(0," + -radius + ")";
              //then translate "up" the distance of the radius;
              //"up" is interpretted according to the rotated coordinates,
              //but for zero rotation it will position the dot at the top
              //of the circle, which is the zero angle for d3
      });

实例：http://fiddle.jshell.net/4x9ap/

（基于this simple pie chart code）

Answer 2

这部分是评论中Lars方程式的重复，但我认为值得一次性重新考虑，因为从角度转换为x / y坐标的三角形标识与你的三角教科书不匹配。 / p>

大多数教科书都假设角度从右侧水平轴开始并逆时针增加，并且垂直轴在页面上方的值越大。

在SVG中，页面上较大的y值较低，并且饼图布局创建的角度（以及OP用于旭日布局的示例代码）绘制的角度为零，垂直线位于顶部圆形，角度顺时针增加。

使用该信息，您可以使用以下三角形公式转换为x和y值：

  g.append("circle") //circles inherit pie chart data from the <g>
      .attr("r", 5) 
      .attr("cx", function(d) { 
          return Math.sin((d.startAngle + d.endAngle)/2) *radius;
      })
      .attr("cy", function(d) { 
          return -Math.cos((d.startAngle + d.endAngle)/2) *radius;
      });

实例：http://fiddle.jshell.net/4x9ap/1/

同样，这个简单示例使用饼图布局，因此数据具有startAngle和endAngle值，并且半径是常量。对于使用分区布局制作的sunburst图表，您可以将(d.startAngle + d.endAngle)/2替换为d.x + d.dx/2，然后使用基于{{1}的函数替换radius }。

在我的所有路径中间添加一个圆圈（sunburst）

2 个答案: