javascript - 数据图的D3气泡不显示

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

这是我的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>

谢谢。

最佳答案

您正在此处初始化数据映射：

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

关于javascript - 数据图的D3气泡不显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45976604/