Question

当我们更新.bubbles（[]）上的新数据时，所有先前的气泡立即消失。我们可以让气泡在那里停留一段时间，然后使用jquery动画将它们从地图中移除，并在特定时间段显示新的气泡吗？

以下是代码： `

</head>
<body>
<div id="container" style="position: relative; width: 100%; height: 600px"></div>
</body>
<script type="text/javascript">
    var bombMap = new Datamap({
        element: document.getElementById('container'),
        fills: {
            'USA': '#1f77b4',
            'RUS': '#9467bd',
            'PRK': '#ff7f0e',
            'PRC': '#2ca02c',
            'IND': '#e377c2',
            'GBR': '#8c564b',
            'FRA': '#d62728',
            'PAK': '#7f7f7f',
            defaultFill: '#c1b9bb' //any hex, color name or rgb/rgba value
        },
        geographyConfig: {
            highlightOnHover: false,
            popupOnHover: false
        },
        scope: 'world',
        data: {
            'RUS': {fillKey: 'RUS'},
            'PRK': {fillKey: 'PRK'},
            'PRC': {fillKey: 'PRC'},
            'IND': {fillKey: 'IND'},
            'GBR': {fillKey: 'GBR'},
            'FRA': {fillKey: 'FRA'},
            'PAK': {fillKey: 'PAK'},
            'USA': {fillKey: 'USA'}
        },
         bubbleConfig: {
            borderWidth: 2,
            borderColor: '#FFFFFF',
            popupOnHover: false,
            fillOpacity: 0.45,
            highlightOnHover: true,
            highlightFillColor: '#FC8D59',
            highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
            highlightBorderWidth: 2,
            highlightFillOpacity: 0.85,
        }
    });

     var bombs = [{
        name: 'Joe 4',
        radius: 10,
        yeild: 400,
        country: 'USSR',
        fillKey: 'RUS',
        significance: 'First fusion weapon test by the USSR (not "staged")',
        date: '1953-08-12',
        latitude: 50.07,
        longitude: 78.43
      },{
        name: 'RDS-37',
        radius: 10,
        yeild: 1600,
        country: 'USSR',
        fillKey: 'RUS',
        significance: 'First "staged" thermonuclear weapon test by the USSR (deployable)',
        date: '1955-11-22',
        latitude: 50.07,
        longitude: 78.43

      },
    ];

    var options = {
        popupTemplate: function (geo, data) { 
                return ['<div class="hoverinfo">' +  data.name,
                '<br/>Payload: ' +  data.yeild + ' kilotons',
                '<br/>Country: ' +  data.country + '',
                '<br/>Date: ' +  data.date + '',
                '</div>'].join('');
        }
    };

    bombMap.bubbles(bombs, options);
    setInterval(function(){
        console.log('removing elements');
        bombMap.bubbles([{
        name: 'Tsar Bomba',
        radius: 10,
        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
      }]);
    },3000);
</script>

来源：https://github.com/markmarkoh/datamaps

Answer 1

是的，您应该可以通过使用d3选择数据图上的所有当前圆圈（气泡）来完成此操作。然后，您可以使用d3过渡将圆圈淡化为填充不透明度0.0001，然后再加载新的气泡阵列。

datamaps.js：加载新数据后删除动画气泡

1 个答案: