7 jun
2017

Cambiar el punto de inicio de una animación sobre un path

Tengo un path que un círculo tiene que seguir usando D3.js. He encontrado una manera de hacerlo a través de métodos getTotalLength y getPointAtLength en SVG como se describe en este ejemplo:

http://bl.ocks.org/mbostock/1705868

Funciona bien, pero el problema es que quiero que mi círculo comienza en una posición determinada ¿cómo puedo cambiar el punto de partida del círculo en la animacióno? Aquí está mi código:

Mi path:

<path id="testpath" style="fill:none;stroke:#FFFFFF;stroke-width:0.75;" d="M1312.193,1035.872l80.324-174.458l13.909-264.839l507.09-211.095
        l8.667-248.405" />

codigo d3:

function followPath()
   {


    var circle = d3.select("svg").append("circle")
                                    .attr("r", 6.5)
                                    .attr("transform", "translate(0,0)")
                                    .attr("class","circle");

    var path = d3.select("#testpath");

    function transition()
    {
        circle.transition()
            .duration(10000)
            .attrTween("transform", translateAlong(path.node()))
            .each("end", transition);
    }

    function translateAlong(path)
    {
        var l = path.getTotalLength();
        return function (d, i, a) {
            return function (t) {
                var p = path.getPointAtLength(t * l);
                return "translate(" + p.x + "," + p.y + ")";
            };
        };
    }

    transition();
}

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation