代码之家 › 专栏 › 技术社区 › tic

D3中的光滑递归变换

transition d3.js javascript

tic · 技术社区 · 8 年前

我已经创建了一个简单的过渡,它在最后会自动恢复。为什么它是干的,如何才能使它顺利(J桥 here

    var circle = svg.append('circle')
    .attr("r",10)
    .attr("cx",10)
    .attr("cy",10)
    .style("fill","red");

    go()

    function go() {
        var c=svg.select("circle");
        c
        .transition()
        .duration(1000)
        .attr("cx",1*c.attr("cx")+10)
        .on("end",go);

    }

1 回复 | 直到 8 年前

XCS 8 年前

这是因为默认情况下,过渡缓和函数不是线性的,而是线性的 . 将缓和函数设置为“线性”可解决此问题:

    function go() {
        var c=svg.select("circle");
        c
        .transition()
        .ease(d3.easeLinear) // <-- THIS WAS ADDED
        .duration(1000)
        .attr("cx",1*c.attr("cx")+100)
        .on("end",go);
}

d3-transition docs :

如果未指定缓和函数,则默认为d3.0。

为什么口吃是因为 ,对象开始缓慢移动,然后缓慢停止。您可以在此处看到缓解效果: https://easings.net/#easeInOutCubic

FIXED DEMO (with linear easing)

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前