在D3 V4中，如何使用.ease（“反弹”）属性？

本文介绍了在D3 V4中，如何使用.ease（“反弹”）属性？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以下是我的代码：

<html>
<head>
<meta charset="UTF-8">
<title>circle</title>
</head>
 
<body>
    <script src="http://d3js.org/d3.v4.min.js"></script>
    <script> 
        var width = 400;    
        var height = 400;    
        var svg = d3.select("body")    
                    .append("svg")     
                    .attr("width",width)     
                    .attr("height",height);     

        var circle1 = svg.append("circle")  
                         .attr("cx", 100)  
                         .attr("cy", 100)   
                         .attr("r", 45) 
                         .style("fill","green");
        circle1.transition()
            .duration(1000)  //延迟1000ms
            .attr("cx", 300);

        var circle2 = svg.append("circle")
                         .attr("cx", 100)
                         .attr("cy", 100)
                         .attr("r", 45)
                         .style("fill","green");

        circle2.transition()
            .duration(1500)
            .attr("cx", 300)
            .style("fill", "red");

        var circle3 = svg.append("circle")
                         .attr("cx", 100)
                         .attr("cy", 100)
                         .attr("r", 45)
                         .style("fill","green");
        circle3.transition()
            .duration(2000)
            .transition()
            .ease("bounce")
            .attr("cx", 300)
            .style("fill", "red")
            .attr("r", 25);

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

当我学习如何使用 .ease（bounce）在d3 v4.x中，错误总是跳出html：45。在官方介绍中： .ease（bounce）现在应该像这样使用：

When I learn how to use the .ease("bounce")in d3 v4.x, the error is always jump out in html:45. In the official introduction: .ease("bounce") now should be used like this:

d3.easeBounce(t)

但它也不起作用，所以我不知道如何修改它。你能给我一个很好的介绍吗？谢谢！

but it also doesn't work, so I don't know how to modify it. Could you give me a good introduction? Thanks!

推荐答案

关于告诉我们，

The documentation on transition.ease([value]) tells us, that

必须将值指定为函数。

因此，您只需要传递缓动函数没有实际调用它（注意，有 d3.easeBounce 后没有括号：

Therefore, you just need to pass in the easing function d3.easeBounce without actually calling it (note, that there are no parentheses following d3.easeBounce):

circle3.transition()
  .duration(2000)
  .transition()
  .ease(d3.easeBounce)   // Pass in the easing function

这篇关于在D3 V4中，如何使用.ease（“反弹”）属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！