Skip to content

animationEnd and animationStart as a configurable option for map.arcConfig #546

@SmileSoftSr

Description

@SmileSoftSr

Is there a way to set a callback to be executed once an arc has finished or started rendering? The idea is for the arc to show up, and once it's done rendering, disappear from view.

Let's say you're tracking a car, a plane, a carrier pigeon, a football with VAR technology, etc.

Once your trackable target leaves its origin point, animationStart kicks off, with its callback (see pseudo example below).

Once your target reaches its destination, the arc is fully rendered, and animationEnd is triggered. As a simplification, let's assume that the tracked target always reaches its destination (for example, you're modeling some event after it has occurred / concluded).

For example:

var map = new Datamap({
  scope: 'world',
  element: document.getElementById('container'),
  projection: 'mercator',
  fills: {
    defaultFill: '#262e37',
    HIGH: '#3288BD',
    LOW: '#D53E4F'
  },
  arcConfig: {
    strokeColor: '#DD1C77',
    strokeWidth: 1,
    arcSharpness: 2,
    animationSpeed: 2000,
    animationStart: function(data) {  // data is the arc being rendered
         animate(data);
    }
    animationEnd: function(data) {  // data is the arc being rendered
    	removeArc(data);
    }
  },
});

function removeArc(arc) {
    // with the lowering opacity, the destination would become invisible as well
    // and then it would be removed alongside its destination

    arc.transition().duration(1000).style("opacity",0).remove();

    // or add a class which would start collapsing / shortening the arc from
    // it's origin point to its destination 
}

function animate(arc) {
    // semi-pseudo code to be triggered before the arc starts rendering
    // imagine the blinking bubble to be a fade-in, fade-out bordered / stroked
    // circle around the destination

    arc["destination"].classList.add("blinkingBubble");
}

Can something like this be done natively? I've looked at the source , and I've seen no mention of the said config options (animationStart, animationEnd), nor have I seen anything similar.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions