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 you have read our privacy policy.

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