d3.js Odd Rotation Behavior

Question

Estoy en las primeras etapas de un proyecto de JS. Todo va bien hasta el momento, excepto por el posicionamiento de una forma. La forma en cuestión es un diamante verde azulado (cuadrado rotado 45 grados). Puedo conseguir la plaza en la pantalla sin ningún problema, pero cuando agrego:

.attr("transform", "rotate(45)") 

la plaza gira correctamente, pero se desplaza hacia la parte izquierda de la pantalla, así:

No estoy seguro de qué está causando esto. Si ayuda, aquí es una parte del código que produce este resultado:

var svg = d3.select("body") 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h); 
     svg 
      .append("rect") 
      .attr("transform", "rotate(45)") 
      .attr("x", 250) 
      .attr("height", w/10) 
      .attr("width", w/10) 
      .attr("fill", "teal") 

Nota: Si pongo la "y" atributo en la plaza desaparece por completo.

¿Qué está causando esto? ¿Hice algo mal que simplemente no puedo ver?

Answer 1

Cuando gira el rect, también gira su sistema de coordenadas. Entonces, cuando más tarde lo mueves 250 a lo largo del eje x, en realidad lo estás moviendo 250 unidades a lo largo de un eje de 45 grados, el resultado de la rotación.

Como regla general, cuando introduce un atributo transform como lo hizo para rotate, debe hacer toda su transformación a través de este atributo. Por lo tanto, debe usar translate en lugar de usar el atributo "x". Entonces se vería así:

svg 
    .append("rect") 
    .attr("transform", "translate(250, 0) rotate(45)") 
    // remove this: .attr("x", 250) 
    .attr("height", w/10) 
    ... 

Esto le da los resultados que creo que usted está buscando. Ahora tenga en cuenta que el orden de las transformaciones importa aquí: si su transformación fue "rotate(45) translate(250, 0)" (es decir, primero gire y luego traduzca), obtendría los mismos resultados erróneos que obtuvo antes. Esto se debe a que cuando gira primero, su traducción ocurre, como antes, a lo largo de un eje x girado.

Answer 2

En SVG debe establecer el origen de transformación para conseguir que gire del centro, tales como ...

.attr("transform", "rotate(45, 250, 100)"); 

Dónde 250, 100 es la posición x e y de la rect menos Es radio. Poniendo todo junto que se vería así ...

var svg = d3.select("body") 
      .append("svg") 
      .attr("width", 400) 
      .attr("height", 300); 
     svg 
      .append("rect") 
      .attr("transform", "rotate(30,"+ (diamond.x+diamond.width/2) + ","+ (diamond.y+diamond.width/2) +")") 
      .attr("x", diamond.x) 
      .attr("y", diamond.y) 
      .attr("height", diamond.width) 
      .attr("width", diamond.width) 
      .attr("fill", "teal")​ 

Usted puede ver una demo aquí:

http://jsfiddle.net/uwM8u/

Answer 3

Aquí es un enfoque ligeramente diferente de la respuesta Duopixel dio. Aquí no está repitiendo los cálculos para X e Y. En el ejemplo de Duopixel, es una mejora trivial ya que simplemente hace referencia a una estructura. A menudo es el caso de que X e Y sean funciones y no me gustaría mantener ese acceso en dos lugares. Este enfoque le permite establecer X e Y un nodo, luego girar en el centro de dicho nodo.

Es posible que después de la rotación, todavía desee ajustar la posición final, lo que podría hacerse con otra transformación, o en el caso de TEXT, puede usar dx, dy.

svgNode.attr("transform", function (d) { 

        var w = +d3.select(this).attr("x") + (this.getBBox().width/2) ; 
        var h = +d3.select(this).attr("y") + (this.getBBox().height/2); 

        return "rotate(90," + w + "," + h + ")"; 

       })