Question

我试图调用更新功能将文本旋转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>

示例JS小提琴here。

Answer 1

你的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 here。

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

1 个答案: