如何通过平移和旋转来计算（SVG）X / Y坐标（在JS / D3.js中）？

Question

以下函数在某些弧的中间绘制小圆圈。 我想从这些圆到其他元素画线。

这就是为什么我需要获取圆的cx / cy值（在旋转它们之后）。

var drawSmallCircles = function(arcs){
  var d=arcs;
  var arcRadius=d[0].outer;

  var svg = d3.select("svg").append("g")
      .attr("transform", "translate(" + width / 4 + "," + height / 2 + ")");

  var smallCircles = svg.selectAll("circle").data(d).enter().append("circle")
    .attr("fill","black")
    .attr("cx",0)
    .attr("cy",-arcRadius)
    .attr("r",4)
    .attr("transform", function(d) { 
      return "rotate(" + (((d.startAngle+d.endAngle)/2) * (180/Math.PI)) + ")";
    });
}

最好的办法是，如果有人可以向我展示一个获取弧半径和角度并返回（cx / cy）的函数。 我将预先计算并存储（cx / cy）在“ arcs-objects”中，并从这些值中绘制出圆圈和线条。

“翻译”转换并不是我真正的问题。

谢谢！

Answer 1

在这种情况下，您的第一个变换将应用于g元素，该元素包含一个具有cy属性的circle元素和一个旋转变换。

第一个变换设置组的原点，第二个变换使圆围绕原点旋转cy 。 由于您的cy属性为负，因此相对于原点的y位置将由-r*Math.cos(theta) ，而x位置将由r*Math.sin(theta) ，其中theta为旋转角（以弧度为单位）和r是从变换的原点到圆心（代码中的arcRadius ）的径向距离。

Answer 2

我的一个朋友通过以下计算帮助了我：

    new_x= ( width/4 
        +Math.cos((d.startAngle+d.endAngle)/2 ) * (0            ) 
        -Math.sin((d.startAngle+d.endAngle)/2 ) * (-arcRadius)  );
    new_y= ( height/2 
        +Math.sin((d.startAngle+d.endAngle)/2 ) * (0           ) 
        +Math.cos((d.startAngle+d.endAngle)/2 ) * (-arcRadius) );