Javascript 如何动态添加带标签的圆？

我正在使用d3创建一个地图，并在其中添加一些数据。到目前为止，我根据从数据库中提取的数据画出了圆圈。我想做的是，当我将鼠标移到其中一个圆圈上时，创建一个新的更大的圆圈，圆圈上有一些文字。我能够画出更大的圆圈，但不知道如何在上面添加标签或文字

这就是我在地图上添加圆圈的方式

    for (var i = 0; i < data.length; i++) {
        var coordinates = projection([data[i]["Longitude"], data[i]["Latitude"]]);
        svg.append('svg:circle')
            .attr('cx', coordinates[0])
            .attr('cy', coordinates[1])
            .attr('r', 5)
            .attr('fill', 'black')
            .attr('class', 'pClass')
            .attr('id', data[i]["Id"])
            .attr('dataId', data[i]["DataId"])
            .on('mouseover', dataMouseover);
    }

所以，当鼠标离开时，我也移除了较大的圆圈。我想要的是，在绘制数据的同时，在圆圈中放置一个文本

更新：我更新了代码以更改当前圆的半径，而不是绘制新的圆

        for (var i = 0; i < data.length; i++) {
            var coordinates = projection([data[i]["Longitude"], data[i]["Latitude"]]);
            svg.append('svg:circle')
            .attr('cx', coordinates[0])
            .attr('cy', coordinates[1])
            .attr('r', 5)
            .attr('fill', 'black')
            .attr('class', 'pClass')
            .attr('id', data[i]["Id"])
            .attr('dataId', data[i]["DataId"])
            .on('click', function () {
                $("#dialog").dialog('open');
            })
            .on('mouseover', function (data) {
                var sel = d3.select(this);
                sel.moveToFront();

                d3.select(this)
                .transition()
                .duration(200)
                .attr('fill', 'darkblue')
                .attr('r', 120)
                .attr('stroke', 'white')
                .attr('stroke-width', '5')
            })
            .on('mouseout', function () {
                d3.select(this)
                .transition()
                .duration(200)
                .attr('fill', 'black')
                .attr('r', 5)
                .attr('stroke', 'none')
                .attr('stroke-width', '0')
            });
        }

---

在我的例子中，仍然可以使用一些指南来指导如何使用g元素来覆盖圆圈和文本。

实际上不能在svg圆圈中添加文本。几周前，我也发现了这一点，这让我自己很懊恼\

相反，将圆和文本封装在g元素中。下面是一个SO帖子的链接，详细解释了如何做到这一点：

执行此操作的步骤：

悬停：先附加一个g元素，而不是附加一个圆。 然后将一个圆元素附加到该g元素上 然后将文本元素附加到该g元素 ??? 根据需要对元素进行样式化。。。 让文本看起来像是在圆圈内，从中获利！

---

另外：不必在鼠标悬停时重新绘制整个圆，只需在鼠标悬停时更改圆的r属性即可。可能会为您节省一些代码并使您的应用程序更新得更快。

我看到了这个，但我不知道如何在代码中使用它。如果我设法做到这一点，之后我还需要根据鼠标移动隐藏/显示文本，我不确定这是否会更容易。但之后我会试一试。听起来不错！如果您无法理解，请添加编辑，我们可以帮助您进行指导。我按照您的建议更新了代码。如果我能提供一些关于如何在我的案例中使用g元素的指导，那将非常有帮助。数据中包含名称和年份值。我想把它们显示在圆圈上。

        for (var i = 0; i < data.length; i++) {
            var coordinates = projection([data[i]["Longitude"], data[i]["Latitude"]]);
            svg.append('svg:circle')
            .attr('cx', coordinates[0])
            .attr('cy', coordinates[1])
            .attr('r', 5)
            .attr('fill', 'black')
            .attr('class', 'pClass')
            .attr('id', data[i]["Id"])
            .attr('dataId', data[i]["DataId"])
            .on('click', function () {
                $("#dialog").dialog('open');
            })
            .on('mouseover', function (data) {
                var sel = d3.select(this);
                sel.moveToFront();

                d3.select(this)
                .transition()
                .duration(200)
                .attr('fill', 'darkblue')
                .attr('r', 120)
                .attr('stroke', 'white')
                .attr('stroke-width', '5')
            })
            .on('mouseout', function () {
                d3.select(this)
                .transition()
                .duration(200)
                .attr('fill', 'black')
                .attr('r', 5)
                .attr('stroke', 'none')
                .attr('stroke-width', '0')
            });
        }