D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ocarneiro
Full window
Github gist
rotate rectangle
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> // Feel free to change or delete any of the code you see in this editor! var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) var transformar = function(angulo) { retangulo.attr("transform","rotate(" + angulo + ")"); } var grupo = svg.append("g") var lado_retangulo = 400; var altura_retangulo = 120; var x = (lado_retangulo/2) * -1; console.log(x); // o retângulo faz parte de um grupo var retangulo = grupo.append("rect") // posiciona o retângulo para que o centro // fique em 0,0 para que a rotação seja // ao redor do centro .attr("x", ((lado_retangulo/2) * -1 )) .attr("y", ((altura_retangulo/2) * -1 )) .attr("width", lado_retangulo) .attr("height", altura_retangulo) .style("fill", "green") // a rotação é feita no retângulo, // a translação é feita no grupo externo grupo.attr("transform", "translate(400,258)") transformar(-45); </script> </body>
https://d3js.org/d3.v4.min.js