D3.js вращать точки прямой балки в центр круга

Question

Как повернуть штангу через точку начала?

Я хочу, чтобы повернуть зеленый прямоугольника бар, чтобы указать на центр круга, как это сделать.

Код ниже как я рисую прямоугольник.

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

Сначала я вычислить угол и г, а затем получить й позицию через г сов (Теа) у позиции г Sin (Теа);

но результат не указывает на центр, мне нужно повернуть его в исходную точку прямоугольника.

Любое предложение, спасибо.

Answer 1

Я не знаю, каковы ваши ограничения, поэтому я буду показывать два возможных решения:

1 вы можете установить точку привязки элемента Rect (с преобразованием атр) в середине кругом и вращаться вокруг этой точки.

2- Если вы не хотите устанавливать опорную точку с преобразованием, вам придется выполнять некоторые векторные вычисления.

Первый пример: в jfiddle http://jsfiddle.net/ym5w0gk5/1/

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

Второй пример: следующий пример перетащить функция прямоугольника, которая всегда обращена к точке.

здесь вы можете найти его в jsfiddle http://jsfiddle.net/denimad/shn1u02n/

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


}