Question

我尝试使用位于此处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 bubbles ）。

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

Datamap的D3气泡不显示

1 个答案: