主页 / 问题 / 1085763
Accepted
Arthur Alunts
Asked:2020-02-21 22:41:16 +0000 UTC2020-02-21 22:41:16 +0000 UTC

如何根据给定的参数 d3.js 正确旋转多边形

  • 772

有一个多边形（polygon）。您需要使用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>

javascript

1 个回答

  1. Best Answer

    属性值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>

    • 3

相关问题