D3.js函数在循环中随机调用工具提示

Question

我使用reveal.js为演示文稿创建了一个d3.js地图，并希望编写一个函数，该函数可以随机调用地图中显示的某个城市的工具提示，以基本上创建一个动画标题幻灯片。但是，我不知道如何开始。是否有某种方法我应该创建一个工具提示用于弹出窗口？

地图使用以下内容显示工具提示：

.on("mouseover", showTooltip)
.on("mouseout", removeTooltip);

function showTooltip(d) {
    $(this).popover({
        placement: 'auto top',
        container: '#map',
        trigger: 'manual',
        html: true,
        content: function () {
            return "<span style='font-size: 11px; text-align: center;'>" + d.City + "</span>";
        }
    });
    $(this).popover('show');

    d3.select(this).style("opacity", 1);
}

function removeTooltip() {
    d3.select(this).style("opacity", opacityCircles);

    $('.popover').each(function () {
        $(this).remove();
    });

}

我已经建立了一个功能，通过让它们随机增长和缩小来动画城市。

function grow() {
    d3.select(this)
    .transition("growing").duration(1000 + 4000 * Math.random())
    .delay(function (d, i) {
        return Math.random() * 1000;
    })
    .attr("r", 8)
    .style("opacity", function (d) {
        return Math.min(1,
            0.2 + Math.random() * 2);
    })
    .transition("shrinking").duration(1000 + 3000 * Math.random())
    .attr("r", 2)
    .style("opacity", function (d) {
        return Math.min(1,
            0.2 + Math.random() * 2);
    })
    .each("end", grow);

}

如何将这两者结合起来创建一个功能，使代表城市的圆圈增长并显示其工具提示，然后收缩并让工具提示消失？