Geek Answers Handbook

The movement of a circle along path d3, animating at different speeds

I really found this question and answer helpful on how to get animations at different speeds.

Change the animation speed of a D3 path

What pointed to this block: http://bl.ocks.org/explunit/6082362

I am following this and would like to add a circle that moves along the top of the line. I added a marker

    var marker = g.append("circle")
    .attr("r", 7)
    .attr("id", "marker")

but for the life of me I cannot get him to follow the line at the same speed.

I added this bit to the end of this block.

var p = path.node().getPointAtLength(lengthAt[i-1] );

    markerTransition = markerTransition.transition()
        .duration(lineData[i].speed)
        .ease('linear')
        .attr("transform", "translate(" + p.x + "," + p.y + ")");

and now I have a moving circle, but it does not synchronize with the line and for some reason is in different coordinates.

How can I make my circle follow the line correctly (at different speeds)?

UPDATE: ! jsfiddle: http://jsfiddle.net/mbrownshoes/k86fbade/6/ , , , .

+4
1

( )

http://jsfiddle.net/mbrownshoes/ozpt6dn7/2/

for (var i = 0; i < lineData.length - 1; ++i) {

wait[i] = tottime;
tottime += lineData[i].t;
setTimeout(function () {
    temp[0] = lineData[ipath];
    temp[1] = lineData[ipath + 1];
    time = lineData[ipath].t;

    var lineGraph = ss.append("path")
        .attr("d", lineFunction(temp))
        .attr("stroke", "grey")
        .attr("stroke-width", 3)
        .attr("fill", "none");



    var totalLength = lineGraph.node().getTotalLength();

    console.log(totalLength);
    console.log(ipath + " " + temp[0].x + " " + temp[1].x + " " + time);

    lineGraph.attr("stroke-dasharray", totalLength + " " + totalLength)
        .attr("stroke-dashoffset", totalLength)
        .transition()
        .duration(time)
        .ease("linear")
        .attr("stroke-dashoffset", 0);

    circle.transition()
        .duration(time)
        .ease("linear")
        .attr("transform",

    function () {


        return "translate(" + temp[1].x + "," + temp[1].y + ")";
    });

    console.log(ipath + ": " + time + ", " + wait);
    ipath++;
}, wait[i]);

}

https://groups.google.com/forum/m/#!topic/d3-js/UhaN7HdYTWM

+1

More articles:


All Articles