Datamap的D3气泡不显示

Question

我试图使用位于这里的数据地图指南和插件http://datamaps.github.io/ datamaps来创建它们在其示例中显示的气泡。但是，泡沫没有显示。我在代码中缺少什么。谢谢。

这里是我的jsfiddle链接：https://jsfiddle.net/centem/882qLzty/

<div id="container" style="position:relative; width:500px; height:300px;"></div> 
     <script> 
      var map = new Datamap({element: document.getElementById("container")}); 

      var bubble_map = new Datamap({ 
       element: document.getElementById("bubbles"), 
       geographyConfig: { 
       popupOnHover: false, 
       highlightOnHover: false 
       }, 
       fills: { 
       defaultFill: '#ABDDA4', 
       USA: 'blue', 
       RUS: 'red' 
       } 
      }); 
      bubble_map.bubbles([ 
       { 
       name: 'Not a bomb, but centered on Brazil', 
       radius: 23, 
       centered: 'BRA', 
       country: 'USA', 
       yeild: 0, 
       fillKey: 'USA', 
       date: '1954-03-01' 
       }, 
       { 
       name: 'Not a bomb', 
       radius: 15, 
       yeild: 0, 
       country: 'USA', 
       centered: 'USA', 
       date: '1986-06-05', 
       significance: 'Centered on US', 
       fillKey: 'USA' 
       }, 
       { 
       name: 'Castle Bravo', 
       radius: 25, 
       yeild: 15000, 
       country: 'USA', 
       significance: 'First dry fusion fuel "staged" thermonuclear weapon; a serious nuclear fallout accident occurred', 
       fillKey: 'USA', 
       date: '1954-03-01', 
       latitude: 11.415, 
       longitude: 165.1619 
       },{ 
       name: 'Tsar Bomba', 
       radius: 70, 
       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 
       } 
      ], { 
       popupTemplate: function(geo, data) { 
       return '<div class="hoverinfo">Yield:' + data.yeild + ' Exploded on ' + data.date + ' by the ' + data.country + '' 
       } 
      }); 
     </script> 

谢谢。

Answer 1

您在这里初始化数据图：

var map = new Datamap({element: document.getElementById("container")}); 

再说你一个错误的DOM ID初始化（没有DOM ID 气泡）。

var bubble_map = new Datamap({ 
       element: document.getElementById("bubbles"),<---it should be container 
       geographyConfig: { 
       popupOnHover: false, 
       highlightOnHover: false 

修复：

1）你不应该在同一个DOM ID重新初始化数据地图。

2）您需要更正气泡数据映射的DOM ID。

已更正的代码here