datamaps.js：在新數據加載後動畫刪除氣泡

當我們更新.bubbles（[]）上的新數據時，所有先前的氣泡都會立即消失。我們可以讓泡泡保持一段時間，然後使用jquery動畫從地圖中移除它們，並在特定時間段顯示新的泡泡？datamaps.js：在新數據加載後動畫刪除氣泡

下面是代碼： `

</head> 
<body> 
<div id="container" style="position: relative; width: 100%; height: 600px"></div> 
</body> 
<script type="text/javascript"> 
    var bombMap = new Datamap({ 
     element: document.getElementById('container'), 
     fills: { 
      'USA': '#1f77b4', 
      'RUS': '#9467bd', 
      'PRK': '#ff7f0e', 
      'PRC': '#2ca02c', 
      'IND': '#e377c2', 
      'GBR': '#8c564b', 
      'FRA': '#d62728', 
      'PAK': '#7f7f7f', 
      defaultFill: '#c1b9bb' //any hex, color name or rgb/rgba value 
     }, 
     geographyConfig: { 
      highlightOnHover: false, 
      popupOnHover: false 
     }, 
     scope: 'world', 
     data: { 
      'RUS': {fillKey: 'RUS'}, 
      'PRK': {fillKey: 'PRK'}, 
      'PRC': {fillKey: 'PRC'}, 
      'IND': {fillKey: 'IND'}, 
      'GBR': {fillKey: 'GBR'}, 
      'FRA': {fillKey: 'FRA'}, 
      'PAK': {fillKey: 'PAK'}, 
      'USA': {fillKey: 'USA'} 
     }, 
     bubbleConfig: { 
      borderWidth: 2, 
      borderColor: '#FFFFFF', 
      popupOnHover: false, 
      fillOpacity: 0.45, 
      highlightOnHover: true, 
      highlightFillColor: '#FC8D59', 
      highlightBorderColor: 'rgba(250, 15, 160, 0.2)', 
      highlightBorderWidth: 2, 
      highlightFillOpacity: 0.85, 
     } 
    }); 

    var bombs = [{ 
     name: 'Joe 4', 
     radius: 10, 
     yeild: 400, 
     country: 'USSR', 
     fillKey: 'RUS', 
     significance: 'First fusion weapon test by the USSR (not "staged")', 
     date: '1953-08-12', 
     latitude: 50.07, 
     longitude: 78.43 
     },{ 
     name: 'RDS-37', 
     radius: 10, 
     yeild: 1600, 
     country: 'USSR', 
     fillKey: 'RUS', 
     significance: 'First "staged" thermonuclear weapon test by the USSR (deployable)', 
     date: '1955-11-22', 
     latitude: 50.07, 
     longitude: 78.43 

     }, 
    ]; 

    var options = { 
     popupTemplate: function (geo, data) { 
       return ['<div class="hoverinfo">' + data.name, 
       '<br/>Payload: ' + data.yeild + ' kilotons', 
       '<br/>Country: ' + data.country + '', 
       '<br/>Date: ' + data.date + '', 
       '</div>'].join(''); 
     } 
    }; 

    bombMap.bubbles(bombs, options); 
    setInterval(function(){ 
     console.log('removing elements'); 
     bombMap.bubbles([{ 
     name: 'Tsar Bomba', 
     radius: 10, 
     yeild: 50000, 
     country: 'USSR', 
     fillKey: 'RUS', 
     significance: 'Largest thermonuclear weapon ever tested—scaled down from its initial 100 Mt design by 50%', 
     date: '1961-10-31', 
     latitude: 73.482, 
     longitude: 54.5854 
     }]); 
    },3000); 
</script>

來源：https://github.com/markmarkoh/datamaps

來源

2014-02-15 Bishwarup Das

我一眼就看不到一個簡單的方法來使它在這個庫中發生。在請求該功能的github上打開一個問題。它可能已經存在但沒有記錄。這對d3代碼來說是一個簡單的改變，但是如果你不想搞亂庫的內部代碼，那就不那麼容易了。 – AmeliaBR

是的，你應該能夠通過使用D3選擇了目前所有的圓圈（氣泡）可以做到這一點是在您的數據圖上。然後，您可以使用d3過渡將您的圓圈淡化爲0.0001的填充不透明度，然後加載新的氣泡陣列。

來源

2014-07-28 14:43:37 skyjacks

datamaps.js：在新數據加載後動畫刪除氣泡

回答

相關問題