javascript - Datamap 的 D3 气泡不显示

Question

我尝试使用位于此处的数据 map 指南和插件 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>

谢谢。

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