5

Есть полигон (многоугольник). Нужно его повернуть с заданным параметром 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>

0

1 ответ 1

3

Значение атрибута 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>

5
  • Stranger in the Q ? А если мне нужно параметрически изменять то как я вставлю парметры, они ведь заштрихованы (бледным цветом)? 21 фев 2020 в 15:28
  • @ArthurAlunts про какие параметры речь, параметры поворота? 21 фев 2020 в 16:04
  • !!! Нужно вставить переменные какие нибудь,но тогда не работает вот что я имею ввиду polygon2.attr("transform", "translate(x1,y1) rotate(d1)");Как встроить свои переменные вместо чисел?Благодарю Вас!!! 22 фев 2020 в 13:17
  • @ArthurAlunts через шаоблоны строк, например, я попозже вам отвечу, сейчас нету компа 22 фев 2020 в 13:32
  • браво блеск блеск шик шок 22 фев 2020 в 20:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.