Javascript 在D3图形中绕轴旋转rect

我正在尝试得到一个在所有角上都有四个控制柄的矩形，以便按所需角度旋转

rect

。有人能帮助我如何在手柄的拖动下沿轴旋转

rect

我确实找到了一个适用于

椭圆

的示例，并尝试将其修改为

矩形

，但没有成功

var w = 400,
    h = 400,
    data = {
        x: 150,
        y: 100,
        rx: 50,
        ry: 50,
        angle: 0
    };

// Returns radians
function angleBetweenPoints(p1, p2) {
    if (p1[0] == p2[0] && p1[1] == p2[1])
        return Math.PI / 2;
    else
        return Math.atan2(p2[1] - p1[1], p2[0] - p1[0] );
}

function distanceBetweenPoints(p1, p2) {
    return Math.sqrt( Math.pow( p2[1] - p1[1], 2 ) + Math.pow( p2[0] - p1[0], 2 ) );
}

var svg = d3.select("body")
            .append("svg")
            .attr("width", 400)
            .attr("height", 300);

var group = svg.append("svg:g").attr('id' , 'id123');


var handles = group.selectAll("circle")
        .data([
            {x:data.x, y:data.y + data.ry, name:"n"},
            {x:data.x + data.rx, y:data.y, name:"e"},
            {x:data.x, y:data.y - data.ry, name:"s"},
            {x:data.x - data.rx, y:data.y, name:"w"}
        ], function (d) { return d.name; })
        .enter()
        .append("svg:circle")
        .attr("cx", function (d) { return d.x; })
        .attr("cy", function (d) { return d.y; })
        .attr("r", 6.5)
        .call(d3.behavior.drag()
            .on("drag", function (d) {
                // Resizing

                var exy = [d3.event.x, d3.event.y],
                    dxy = [data.x, data.y],
                    dist = distanceBetweenPoints(exy, dxy),
                    angle = data.angle + angleBetweenPoints(dxy, exy);
                switch(d.name) {
                    case "e":
                    case "w":
                        break;
                    case "s":
                    case "n":
                        angle += Math.PI/2;
                        break;
                };
                data.angle = angle;
                update();
            })
        );

var ellipse = group.append("svg:ellipse");

function toDegrees(rad) {
    return rad * (180/Math.PI);
}

function update() {
    ellipse
        .attr("cx", data.x)
        .attr("cy", data.y)
        .attr("rx", data.rx)
        .attr("ry", data.ry);

    group.attr("transform", "rotate(" + toDegrees(data.angle) + "," + data.x + "," + data.y + ")");

}

update();

---

首先你要做一个矩形

var rect = group.append("svg:rect");

然后相应地放置矩形

//place the rectangle in its place
function update() {
    rect
        .attr("x", data.x - data.rx +5)//the x coordinate
        .attr("y", data.y  - data.ry +5)
        .attr("width", (data.rx*2)-10)//the width
        .attr("height", (data.ry*2)-10);//the height

    group.attr("transform", "rotate(" + toDegrees(data.angle) + "," + data.x + "," + data.y + ")");

}

工作代码

矩形旋转的工作代码

---

希望这有帮助

谢谢你，西里尔。这应该对我有帮助：）Cyril，还有一件事，如果我在组上添加一个拖拽，单击处理程序似乎不起作用。也可以同时进行拖动和旋转吗？