如何计算(SVG) X/Y坐标的平移和旋转(在JS/D3.js)

How to calculate (SVG) X/Y coordinates out of translation and rotation (in JS/D3.js)?

本文关键字：旋转 D3 JS js 计算 何计算 SVG 坐标      更新时间：2023-09-26

下面的函数在一些圆弧的中间绘制小圆。我想在这些圆和其他元素之间画直线。

这就是为什么我需要得到圆圈的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)最好。我会在"arcs-objects"中预先计算并存储(cx/cy)，并根据这些值绘制圆和线。

"translate"转换并不是我真正的问题。

谢谢!

我的一个朋友帮我做了以下计算:

    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) );

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

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

相关文章：