CODEWITHSUNDEEP
javascriptsvgd3.js
fabien
fabien

Reputation: 2258

D3js transition between two path cause parsing error

I try to make a simple transition / interpolation between two path / shapes (designed in illustrator).

I have d3 in my project, so I use it; but I could try something else if I can figure out how to do.

I Define a few variables (including the two path) :

    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";

Then I start to loop on the transition :

    loop();

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

And the weird things happen !

I have a long list of errors in my console : 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"

Which is not a valid svg. As far as I understand what this is about, svg path with float numbers are non valid (but I do have floats in my base path and they work ; so I'm not so sure).

It appears that I should try to round all the numbers all along the transition.

But the fact I really don't understand is why it works on the last 75% of the loop and not on the first 25%.

Here is a fiddle to see the fail in action : http://jsfiddle.net/vQabH/

And why it works on this one : http://jsfiddle.net/9bC6M/ (which I made from this example : http://bl.ocks.org/mbostock/3081153 )

Upvotes: 1

Views: 159

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

The problem is that in your paths, negative values are not separated by space or comma. For example, there is c5.514,0,10,4.486,10,10 (3 pairs of values, separated by comma), but c0,5.514-4.486,10-10,10 (again 3 pairs of values, but not all separated with commas). This messes up the D3 transition.

D3 simply doesn't know how to interpolate between strings like that. For example, you're getting a parse error for c5.514,0,10-4.4542992,101.0597007999999999 (2 pairs of values and a spurious number).

It works fine when you separate the negative values from the rest, see here. Technically, you could argue that it should still work as it's a valid SVG path, so you may want to open an issue about this on the D3 website.

Upvotes: 2

Related Questions