javascript - 两条路径之间的 D3js 转换导致解析错误

Question

我尝试在两个路径/形状(在 illustrator 中设计)之间进行简单的过渡/插值。

我的项目中有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);
    }

奇怪的事情发生了!

我的控制台中有一长串错误:错误:解析 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。据我所知，带有 float 的 svg 路径是无效的(但我的基本路径中确实有 float 并且它们有效；所以我不太确定)。

看来我应该尝试在整个过渡过程中对所有数字进行四舍五入。

但我真的不明白为什么它在循环的最后 75% 而不是前 25%。

这是一个 fiddle ，可以看到操作失败: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 网站上提出一个关于这个的问题。