Home Circle transition along line transition between coordinates in d3 geo map
Reply: 0

Circle transition along line transition between coordinates in d3 geo map

user2929
1#
user2929 Published in June 19, 2018, 4:30 pm
 function drawLines(data) {
        $('.arc').remove();
         $('.circle').remove();

            var lineTransition = function lineTransition(path) {
                path.transition()
                    .duration(2000)
                    .call(color, "grey", "#CCFF00")
                    .call(fadeIn)
                    .attr('id', 'callPaths')
                    .attrTween("stroke-dasharray", tweenDash)
                    .each("end", function(d, i) {
                    });
            };
            var tweenDash = function tweenDash() {
                var len = this.getTotalLength(),
                    interpolate = d3.interpolateString("0," + len, len + "," + len);

                return function(t) {
                    return interpolate(t);
                };
            };


            var links = [];

            for (var i = 0; i < data.length; i++) {
                links.push({
                    type: "LineString",
                    coordinates: [
                        [data[i].from_city_longitude, data[i].from_city_latitude],
                        [data[i].to_site_longitude, data[i].to_site_latitude]
                    ]
                });}
            // Standard enter / update 
                var pathArcs = g.selectAll(".arc")
               .data(links);

    var circle = g.append("circle")
               .attr("class","circle")
.attr("r", 4)
.attr("fill", "blue");

            //enter
            pathArcs.enter()
                .append("path").attr({
                    'class': 'arc'
                }).style({
                    fill: '',
                });

            //update
            pathArcs.attr({
                    d: path
                })
                .style({
                    stroke: 'rgb(250,250,254)',
                    'stroke-width': '1px',
                })
                // Uncomment this line to remove the transition
                .call(lineTransition)
                .call(transition);
    function transition() {
    circle.transition()
    .duration(2000)
    .attrTween("transform", translateAlong(pathArcs.node()))
    .each("end", transition);
    }

   // Returns an attrTween for translating along the specified path element.
    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 + ")";
    };};}           
            pathArcs.exit().remove();
    }

Only one circle transition happens at a time whereas I have multiple line transitions occurring. I want the circle transition to happen along with every line transition. This is to indicate the transitions in a map between two coordinates.The line and the circle should move simultaneously. The data for the coordinates is passed from a function call.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.325037 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO