Как правильно повернуть многоугольник по заданным параметрам d3.js

Question

Есть полигон (многоугольник). Нужно его повернуть с заданным параметром D, где D принадлежит (0, 360). При этом, ось вращения зависит от нормальной длины объекта и она тоже задана (X1 , Y1).

Вот мой полигон, рисую так:

polygon2.attr("transform", "translate(300,150), rotate('90')");

Почему ничего не работает в этой строке?

<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<html> <script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var canvas = d3.select("body")
   .append("svg")
   .attr("height", 400)
   .attr("width", 400);
var polygon2=canvas.append("polygon")
polygon2=canvas.append("polygon")
   .attr("points", [122,122,133,133,144,155,122,155])
   .style("fill", "green")
   .style("stroke", "black")
   .style("strokeWidth", "1px")
 polygon2.attr("transform", "translate(300,150), rotate('90')");
 //
 </script>
</body>
</html>

Answer 1

Значение атрибута transform имеет синтаксис без запятых и кавычек:

polygon2.attr("transform", "translate(300,150) rotate(90)");

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

var polygon2 = canvas.append("polygon")
  .attr("points", [122, 122, 133, 133, 144, 155, 122, 155])
  .style("fill", "green")
  .style("stroke", "black")
  .style("strokeWidth", "1px")


setInterval(() => {
  let rot = Math.sin(Date.now() / 1000) * 180;
  polygon2.attr("transform", ` translate(40,40)rotate(${rot})translate(-122,-122)`);
}, 20)

<script src="https://d3js.org/d3.v5.min.js"></script>

БЛОГ НА HUSL

Как правильно повернуть многоугольник по заданным параметрам d3.js

Ответы (1 шт):