Javascript D3.js将矩形条点旋转到圆的中心

如何围绕起点旋转一根杆？

我想旋转绿色矩形条以指向圆的中心，并说明如何操作

下面的代码是如何绘制矩形的

    downNode = downNode
    .data(_nodes)
    .attr("id", function (d, i) {
    return "nodeDown" + d.dbId;
    })
    .enter()
    .append("rect")
    .attr("class", "node").attr("class","downExpressed")
    .attr("x", function (d) {
         return Math.sin( Math.PI - (Math.max(0, Math.min(2 * Math.PI, x(d.dx)))+ Math.max(0, Math.min(2* Math.PI, x(d.dx + d.d_dx)))) / 2 ) * Math.max(0, y(d.dy+ d.d_dy)); })
    .attr("height", function (d) {
         var thea = Math.max(0, Math.min(2 * Math.PI, x(d.dx + d.d_dx))) - Math.max(0, Math.min(2 *  Math.PI, x(d.dx)));
         var r = Math.max(0, y(d.dy));
         return Math.min(r * thea, Math.floor(_this.maxLevel));})
    .attr("y", function (d) {
         return Math.cos(Math.PI - (Math.max(0, Math.min(2 * Math.PI, x(d.dx)))+ Math.max(0, Math.min(2 * Math.PI, x(d.dx + d.d_dx)))) / 2) * Math.max(0, y(d.dy+ d.d_dy));})
    .attr("width", function (d) {                                         
        return 1/2*Math.floor((d.expression.downs.length) / DownMax * ( Math.max(0, y(d.dy + d.d_dy)) - Math.max(0, y(d.dy)) ));
       })

首先计算角度和r，然后通过rcos（thea）y位置rsin（thea）得到x位置

但是结果不是指向中心，我需要绕着矩形条的起点旋转它

---

任何建议，谢谢。

我不知道您的限制是什么，因此我将展示两种可能的解决方案：

1-可以在圆的中间设置rect元素的定位点（使用transform attr）并围绕该点旋转

2-如果你不想用变换设置定位点，你必须做一些向量计算

第一个例子： 胡闹

第二个示例：下一个示例是始终面向点的矩形的拖动函数

在这里，您可以在JSFIDLE中找到它

。。。
//可拖动矩形的设置
var drag=d3.behavior.drag（）.on（“drag”，dragmove）；
append（“rect”）.attr（“width”，10）.attr（“height”，30）.call（drag）；
...
功能拖动（d）{
//获取鼠标坐标
var x=d3.event.x；
变量y=d3.event.y；
//获取鼠标坐标和定位点坐标之间的向量（V1）
V1={“x”：x-anchorPoint.x，“y”：-（y-anchorPoint.y）}；
//得到垂直向量（V2）。如果有一个带坐标（x，y）的向量v，那么垂直于v的向量是（y，-x）或（-y，x）。
V2={“x”：auxvect.x，“y”：-auxvect.y）}；
//获取向量（0,1）和V2之间的角度。
//http://stackoverflow.com/questions/12903547/fastest-way-to-find-the-angle-between-two-points
ang=Math.acos（V2.x/Math.sqrt（V2.x*auxvect.x+V2.y*V2.y））；
ang=ang*180/Math.PI；//以度为单位
//最后，这是要应用于变换的旋转角度
如果（y你正在设置x、y、宽度、高度属性，难道你不应该设置旋转吗？

？谢谢，内红色使用旋转功能，绿色条需要放在外环上，所以我计算它，不使用旋转。最后，我使用堆叠条形图，而不是放在外环和内环上谢谢，实际上是在最后，我使用了堆叠条形图。

svg.append("rect")
   .attr("id","myRect")
   .attr("width",30).attr("height",10)
   //this is the relative position to the anchor point
   .attr("x",-80).attr("y",-5)
   //with the transform attribute you define anchor point (translate)
   // and the rotation (rotation). change rotation to make it go around the center.
   .attr("transform","translate("+width/2+","+height/2+")rotate("+rotate+")");

...
//setup of the draggable rectangle
var drag = d3.behavior.drag().on("drag", dragmove);
svg.append("rect").attr("width",10).attr("height",30).call(drag);
...
function dragmove(d) {
    //get mouse coordinates
    var x = d3.event.x;
    var y = d3.event.y;

    //get the vector (V1) between the mouse coordinates and anchor point coordinates
    V1 ={"x": x-anchorPoint.x,"y":-(y-anchorPoint.y)};

    //get the perpendicular vector (V2) . If you have a vector v with coordinates (x, y), then a vector perpendicular to v is (y, -x) or (-y, x). 
    V2 ={"x": auxvect.x,"y":-auxvect.y)};

    //get the angle between vector (0,1) and V2 .         
    //http://stackoverflow.com/questions/12903547/fastest-way-to-find-the-angle-between-two-points
    ang= Math.acos( V2.x / Math.sqrt(V2.x*auxvect.x + V2.y*V2.y) );
    ang = ang * 180 / Math.PI; //in degrees

    //finally, this is the rotation angle to apply in the transformation
    if(y<anchorPoint.y){
        d3.select(this).attr("transform", "translate(" + x + "," + y + ")rotate("+(-ang)+")");
    }else{
        d3.select(this).attr("transform", "translate(" + x + "," + y + ")rotate("+(ang)+")");
    }


}