D3 svg-path 过渡摆动（包括 jsfiddle）答案

【问题标题】：D3 svg-path transition wiggles around (inclusive jsfiddle)D3 svg-path 过渡摆动（包括 jsfiddle）
【发布时间】：2013-12-03 16:05:03
【问题描述】：

我想使用 d3.js 在矩形和圆形之间进行转换。

我的尝试在这里：http://jsfiddle.net/8kxBW/1/

但对我来说，这种过渡看起来并不顺利。有人知道如何改进过渡吗？

有没有简单的方法可以做到这一点？

var circleDAttribute = "m4,15.75c0,-6.90608 5.59392,-12.5 12.5,-12.5c6.90608,0     12.5,5.59392 12.5,12.5c0,6.90608 -5.59392,12.5 -12.5,12.5c-6.90608,0 -12.5,-5.59392 -12.5,-12.5z";
var rectDAttribute = "m1.75,1.75l0,40l80.25,0l-0.25,-40l-80,0z";

d3.select("#pathTransition")
     .append("svg").append("g")
        .attr("transform","translate(60,60)")
     .append("path")
            .attr("d",rectDAttribute)
            .transition()
            .duration(3000)
            .attr("fill","blue")
            .transition()
            .duration(8000)
            .attr("d",circleDAttribute);

【问题讨论】：

superformula explorer 在这里应该有所帮助。
哦，还有this question。
谢谢！！超级公式正是我想要的。
太好了，我将添加它作为参考答案。

标签： javascript svg path d3.js transition

【解决方案1】：

superformula explorer 允许您在这些形状之间进行转换，等等。

【讨论】：