如何让Datamaps中JavaScript绘制的弧线完成绘制后消失？

因为Datamaps基于D3.js开发，我们可以利用D3的过渡动画API，实现弧线绘制完成后自动淡出消失的效果，还原类似攻击地图的动态视觉。

修改后的完整代码 #

JavaScript部分

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
});

// 实现弧线绘制完成后淡出消失
d3.selectAll('.datamaps-arc')
  .transition()
  .delay(2000) // 延迟时间与弧线绘制时长一致，确保绘制完成再消失
  .duration(1000) // 消失动画的时长（毫秒）
  .style('opacity', 0) // 透明度从1降到0
  .remove(); // 动画结束后从DOM中彻底移除元素

HTML部分

<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>

核心逻辑说明 #

• Datamaps绘制的弧线会自动添加datamaps-arc类，用D3的selectAll('.datamaps-arc')可以选中所有弧线元素
• delay(2000)：等待弧线完全绘制完成（和arcConfig里的animationSpeed保持一致），再启动消失动画
• transition()+style('opacity', 0)：实现平滑的淡出效果，duration(1000)控制消失的快慢
• remove()：动画结束后清理DOM，避免元素堆积

进阶：循环生成动态弧线 #

如果要实现类似攻击地图的持续动态效果，可以把绘制和消失逻辑封装成函数，用setInterval重复执行：

function drawAndFadeArcs() {
  // 先移除已有的旧弧线
  d3.selectAll('.datamaps-arc').remove();
  
  // 绘制新弧线
  cyber.arc(latLong, {
    strokeWidth: 1
  });
  
  // 新弧线淡出消失
  d3.selectAll('.datamaps-arc')
    .transition()
    .delay(2000)
    .duration(1000)
    .style('opacity', 0)
    .remove();
}

// 每4秒重复一次（2秒绘制+1秒消失+1秒间隔，可按需调整）
setInterval(drawAndFadeArcs, 4000);

内容的提问来源于stack exchange，提问作者harmless menace