如何在D3 js中连续旋转任何形状

how to rotate any shape continuously in D3 js?

本文关键字：连续 旋转 任何形 js D3      更新时间：2023-09-26

我试图调用更新函数将文本旋转1度，一旦度再次达到360，旋转角度变为0，因此它将继续旋转。但我认为这不是解决问题的正确方法，也行不通。如果有人知道怎么做，请告诉我。

<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var width = 600;
var height = 300;
var holder = d3.select("body")
  .append("svg")
  .attr("width", width)    
  .attr("height", height); 
// draw the text
holder.append("text")
.style("fill", "black")
.style("font-size", "56px")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("transform", "translate(300,150) rotate(0)")
.text("Hi, how r u doing");
// Initial starting angle of the text
for(var i=0;i<=360;i++){
    update(i);
    if(i==360){i=0;}
}

var n;
// update the element
function update(n) {
// rotate the text
holder.select("text")
.transition()
.duration(2000)
.attr("transform", "translate(300,150) rotate("+n+")");
}

</script>
</body>
</html>

for循环永远不会结束，因为您在计数器i结束之前将其重置为0。如果删除这一行，代码将没有可见的结果，因为for循环执行得如此之快，在您看到任何内容之前它已经完成了。

一个更好的解决方案是使用setInterval，例如

var width = 600;
var height = 300;
var holder = d3.select("body")
  .append("svg")
  .attr("width", width)    
  .attr("height", height); 
// draw the text
holder.append("text")
.style("fill", "black")
.style("font-size", "56px")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.attr("transform", "translate(300,150) rotate(0)")
.text("Hi, how r u doing");
// Initial starting angle of the text
var i = 0;
var timeInterval = 10;
setInterval(function(){
        i += 1;
        update(i % 360) 
  },timeInterval);

var n;
// update the element
function update(n) {
// rotate the text
holder.select("text")
.attr("transform", "translate(300,150) rotate("+n+")");
}

可以通过调节timeInterval变量来控制转速

我在这里添加了一个示例JS Fiddle

相关文章：