javascript - 如何动态添加带有标签的圆圈？

Question

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

这就是我向 map 添加圆圈的方法。

    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);
    }

这是鼠标悬停事件

    function dataMouseover() {
        var id = $(this).attr('id');
        var d= $.grep(data, function (e) { return e.Id == id; });
        var coordinates = projection([d[0]["Longitude"], d[0]["Latitude"]]);

        svg.append('svg:circle')
           .attr('cx', coordinates[0])
           .attr('cy', coordinates[1])
           .attr('r', 120)
           .attr('fill', 'darkblue')
           .attr('class', 'pClass')
           .attr('id', data[0]["Id"] + "popUp")
           .attr('dataId', plaques[0]["DataId"])
           .attr("stroke", "white")
           .attr("stroke-width", "5")
           .on('mouseout', function () {
                d3.select(this).remove();
        });
    }

所以，当鼠标离开时，我也会删除更大的圆圈。我想要的是将数据中的文本放入该圆圈中，同时在其中绘制文本。

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

        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 元素覆盖圆圈和文本的指导。

Answer 1

您实际上无法在 svg circle 内添加文本。几周前，我也懊恼地发现了这一点。 :\

相反，将circle 和text 封装在g 元素内。这是一个 SO 帖子的链接，详细解释了如何做到这一点:d3 add text to circle

执行此操作的步骤:

1. 悬停时:首先附加一个 g 元素，而不是附加一个圆。
2. 然后将一个 circle 元素附加到该 g 元素
3. 然后将 text 元素附加到该 g 元素
4. >？？？ (按照您的意愿对元素进行样式化...)
5. 让文本看起来像在圆圈内内是有好处的!

另外:不要在鼠标悬停时重新绘制整个圆，看看是否可以仅更改r attr鼠标悬停时圆 的>。可能会为您节省一些代码并使您的应用程序更新得更快一些。