Question

我尝试在两个路径/形状之间进行简单的过渡/插值（在插图画家中设计）。

我的项目中有d3，所以我使用它;但如果我能弄明白怎么做，我可以尝试其他的东西。

我定义了一些变量（包括两个路径）：

    var width = 300,
        height = 300;

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var path = svg.append("path"),
        d0 = "M12,2c5.514,0,10,4.486,10,10c0,5.514-4.486,10-10,10C6.486,22,2,17.514,2,12C2,6.486,6.486,2,12,2z M12,0 C5.372,0,0,5.372,0,12c0,6.629,5.372,12,12,12s12-5.371,12-12C24,5.372,18.628,0,12,0z",
        d1 = "M12,19.938c5.514,0,10-13.452,10-7.938c0,5.514-4.486,10-10,10C6.486,22,2,17.514,2,12C2,6.486,6.486,19.938,12,19.938z M12,0C5.372,0,0,5.372,0,12c0,6.629,5.372,12,12,12s12-5.371,12-12C24,5.372,18.628,0,12,0z";

然后我开始循环过渡：

    loop();

    function loop() {
        path
            .attr("d", d0)
            .transition()
            .duration(5000)
            .attr("d", d1)
            .transition()
            .delay(5000)
            .attr("d", d0)
            .each("end", loop);
    }

奇怪的事情发生了！

我的控制台中有很多错误：Error: Problem parsing d="M12,10.9402992c5.514,0,10-4.4542992,101.0597007999999999c0,5.514-4.486,10-10,10C6.486,22,2,17.514,2,12C2,6.486,6.486,10.9402992,12,10.9402992z M12,0C5.372,0,0,5.372,0,12c0,6.629,5.372,12,12,12s12-5.371,12-12C24,5.372,18.628,0,12,0z"

哪个不是有效的svg。据我了解这是什么，带有浮点数的svg路径是无效的（但我的基本路径中确实有浮点数并且它们有效;所以我不太确定）。

似乎我应该尝试在整个过渡期间舍入所有数字。

但事实上，我真的不明白为什么它适用于最后75％的循环，而不是前25％。

这是一个小提琴，可以看到失败的行动：http://jsfiddle.net/vQabH/

为什么它适用于这个：http://jsfiddle.net/9bC6M/ （我从这个例子中得出：http://bl.ocks.org/mbostock/3081153）

Answer 1

问题是在您的路径中，负值不会用空格或逗号分隔。例如，有c5.514,0,10,4.486,10,10（3对值，用逗号分隔），但c0,5.514-4.486,10-10,10（再次3对值，但不是全部用逗号分隔）。这会扰乱D3过渡。

D3根本不知道如何在字符串之间进行插值。例如，您正在为c5.514,0,10-4.4542992,101.0597007999999999获取解析错误（2对值和虚假数字）。

将负值与其他值分开时，它可以正常工作，请参阅here。从技术上讲，你可以说它仍然可以工作，因为它是一个有效的SVG路径，所以你可能想在D3网站上打开一个关于这个的问题。

D3js在两个路径之间转换导致解析错误

1 个答案: