圆周内的返回位置

Question

我正在尝试使用d3.js进行具有N个角的规则多边形的圆近似。

我的想法是始终在背景中有一个圆形，并使用“变换”功能围绕该圆形滑动并获得一个位置（x，y），该位置将传递给多边形。

例如，如果必须将圆分成三部分，它将变成三角形。这样，我将在圆中从（0,0）开始旋转3次，然后返回圆的圆周内其他两个点的位置。

我的问题是“变换”功能没有返回x，y坐标。

var svg = d3.select('svg');
var originX = 200;
var originY = 200;
var outerCircleRadius = 60;


var outerCircle = svg.append("circle").attr({
    cx: originX,
    cy: originY,
    r: outerCircleRadius,
    fill: "none",
    stroke: "black"
});

var chairOriginX = originX + ((outerCircleRadius) * Math.sin(0));
var chairOriginY = originY - ((outerCircleRadius) * Math.cos(0));

var chairWidth = 20;

console.log(chairOriginX);
console.log(chairOriginY);

var chair = svg.append("rect").attr({
    x: chairOriginX - (chairWidth / 2),
    y: chairOriginY - (chairWidth / 2),
    width: chairWidth,
    opacity: 1,
    height: 20,
    fill: "none",
    stroke: "blue"
});


var chairOriginX2 = originX + ((outerCircleRadius) * Math.sin(0));
var chairOriginY2 = originY - ((outerCircleRadius) * Math.cos(0));
console.log(chairOriginX2);
console.log(chairOriginY2);


var chair2 = svg.append("rect").attr({
    x: chairOriginX2 - (chairWidth / 2),
    y: chairOriginY2 - (chairWidth / 2),
    width: chairWidth,
    opacity: 1,
    height: 50,
    fill: "none",
    stroke: "red"
});

var n_number = 5
var n_angles = 360/n_number
var angle_start=0;
var angle_next;

chair2.attr("transform", "rotate(" + (angle_start+n_angles+n_angles) + ", 200, 200)");
console.log(chair2.attr("transform", "rotate(" + (angle_start+n_angles+n_angles) + ", 200, 200)"));



var chairOriginX3 = originX + ((outerCircleRadius) * Math.sin(0));
var chairOriginY3 = originY - ((outerCircleRadius) * Math.cos(0));
console.log(chairOriginX3);
console.log(chairOriginY3);

var chair3 = svg.append("rect").attr({
    x: chairOriginX3 - (chairWidth / 2),
    y: chairOriginY3 - (chairWidth / 2),
    width: chairWidth,
    opacity: 1,
    height: 50,
    fill: "none",
    stroke: "black"
});

var n_number = 5
var n_angles = 360/n_number
var angle_start=0;
var angle_next;

chair3.attr("transform", "rotate(" + (angle_start+n_angles+n_angles+n_angles) + ", 200, 200)");
console.log(chair3.attr("transform", "rotate(" + (angle_start+n_angles+n_angles+n_angles) + ", 200, 200)"));