Question

我正在使用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);
    }

这是mouseover事件

    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

执行此操作的步骤：

悬停时：首先添加circle元素，而不是附加g。
然后将circle元素附加到g元素
然后将text元素附加到g元素
??? （按照你的方式对元素进行风格化......）
让它看起来像文本在circle！

另外：而不是在鼠标悬停时重新绘制整个circle，看看您是否可以更改r的{{1}} attr鼠标移到。可能会为您节省一些代码和让您的应用更新一点。

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

1 个答案: