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

Sanjana Kubendran
Sanjana Kubendran Published in 2018-02-14 08:22:42Z
 function drawLines(data) {

            var lineTransition = function lineTransition(path) {
                    .call(color, "grey", "#CCFF00")
                    .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++) {
                    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")

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

                    'class': 'arc'
                    fill: '',

                    d: path
                    stroke: 'rgb(250,250,254)',
                    'stroke-width': '1px',
                // Uncomment this line to remove the transition
    function transition() {
    .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 + ")";

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.330621 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO