CODEWITHSUNDEEP
javascriptcss-animationsdatamaps
harmless menace
harmless menace

Reputation: 1

Hiding an arc created by Javascript

I am new to JavaScript, and I want to know how to make the arc vanish after it's been drawn.

The script below draws an arc as I want, in datamaps world map, but I am not really sure how to make it disappear after it's been drawn.

var cyber = 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
  }
});


var latLong = [{
    'origin': {
      'latitude': -33.462500000000006,
      'longitude': -70.6682
    },
    'destination': {
      'latitude': 30.0771,
      'longitude': 31.285899999999998
    }
  },
  {
    'origin': {
      'latitude': 41.12710000000001,
      'longitude': -73.4416
    },
    'destination': {
      'latitude': 30.293599999999998,
      'longitude': 120.16140000000001
    }
  }
]

cyber.arc(latLong, {
  strokeWidth: 1
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.9/datamaps.world.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>


<div id="container" style="position: relative; width: 700px; height:500px; margin-top: 1%; margin-left: 1%;"></div>

With css and html tags I know that I can make it vanish by using the animate option.

I am trying to achieve something like this

Upvotes: 0

Views: 48

Answers (0)

Related Questions