Javascript 数据地图'；D3气泡不显示

我试图使用datamaps指南和位于此处的插件datamaps创建示例中显示的气泡。然而，泡沫并未显现。我在代码中遗漏了什么。多谢各位

以下是指向我的JSFIDLE的链接：

var-map=newdatamap（{element:document.getElementById（“container”）}）；
var bubble_map=新数据映射({
元素：document.getElementById（“气泡”），
地理图形配置：{
popupOnHover:false，
highlightOnHover:错误
},
填充：{
defaultFill:“#ABDDA4”，
美国：“蓝色”，
罗斯：“红色”
}
});
泡泡([
{
名称：“不是炸弹，但以巴西为中心”，
半径：23，
居中：“胸罩”，
国家：'美国'，
yeild:0，
fillKey:'美国'，
日期：1954-03-01
},
{
名字：“不是炸弹”，
半径：15，
yeild:0，
国家：'美国'，
以‘美国’为中心，
日期：“1986-06-05”，
意义:"以我们为中心",，
菲尔基：“美国”
},
{
名称：“布拉沃城堡”，
半径：25，
产量：15000，
国家：'美国'，
意义：“第一个干聚变燃料”阶段性“热核武器；发生了严重的核沉降事故”，
fillKey:'美国'，
日期：“1954-03-01”，
纬度：11.415，
经度：165.1619
},{
名称：“沙皇炸弹”，
半径：70，
产量：50000，
国家：'苏联'，
菲尔基：“罗斯”，
意义：“有史以来测试的最大热核武器从最初的100公吨设计缩减了50%，
日期：“1961-10-31”，
纬度：73.482，
经度：54.5854
}
], {
popupTemplate：功能（地理位置、数据）{
return'Yield:'+data.yeild+'由'+data.country+''在'+data.date+'上分解
}
});

---

谢谢。

您正在这里初始化数据映射：

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

然后再次使用错误的DOM ID初始化（没有DOM ID气泡）

var bubble\u map=新数据映射({
元素：document.getElementById（“泡泡”），谢谢你，Cyril。我的新手疏忽了。
var map = new Datamap({element: document.getElementById("container")});

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