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)) + ")";
    });
}

如果有人可以向我展示一个获得Arc-Radius和Angle并返回（cx / cy）的函数，那将是最好的。我会预先计算并存储（cx / cy）＆＃34; arcs-objects＆＃34;并从这些值中绘制圆圈和线条。

＆＃34;翻译＆＃34;转型不是我真正的问题。

谢谢！

Answer 1

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

第一个变换设置组的原点，第二个变换围绕原点旋转距离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) );

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

2 个答案: