如何为d3.geo中的每个位置节点添加可交互样式的标签？

不用<foreignObject>就能轻松实现你的需求，咱们直接通过D3的事件监听来修改节点样式，还能添加交互反馈，具体方案如下：

1. 悬停效果（鼠标移入/移出） #

在你创建城市节点的代码中，添加mouseover和mouseout事件监听，动态修改节点的颜色、透明度、大小，还可以添加信息提示框：

let locations = g
    .selectAll("circle")
    .data(cities)
    .enter()
    .append("circle")
    .attr("cx", function (d) {
        return projection([d.lon, d.lat])[0];
    })
    .attr("cy", function (d) {
        return projection([d.lon, d.lat])[1];
    })
    .attr("r", 10)
    .style("fill", "red")
    .style("opacity", 0.6)
    .attr("id", d => d.code)
    .attr("data-city", d => d.city)
    .attr("data-price", d => d.price)
    .attr("class", "points")
    // 鼠标移入事件
    .on("mouseover", function(event, d) {
        // 修改当前节点样式
        d3.select(this)
            .style("fill", "orange")
            .style("opacity", 1)
            .attr("r", 12);
        
        // 创建悬浮提示框显示城市信息
        const tooltip = d3.select("body")
            .append("div")
            .attr("class", "city-tooltip")
            .style("position", "absolute")
            .style("background-color", "#fff")
            .style("padding", "8px 12px")
            .style("border", "1px solid #ddd")
            .style("border-radius", "4px")
            .style("pointer-events", "none") // 避免提示框干扰鼠标事件
            .style("left", `${event.pageX + 10}px`)
            .style("top", `${event.pageY - 25}px`)
            .html(`
                <strong>${d.city}</strong><br>
                价格: ${d.price}
            `);
    })
    // 鼠标移出事件
    .on("mouseout", function() {
        // 恢复节点原样式
        d3.select(this)
            .style("fill", "red")
            .style("opacity", 0.6)
            .attr("r", 10);
        
        // 移除提示框
        d3.select(".city-tooltip").remove();
    })
    .on("end", drawLines());

2. 点击效果 #

添加click事件监听，实现点击时的样式变化（比如标记选中状态）：

// 在上面的代码中继续添加click事件
.on("click", function(event, d) {
    // 先重置所有节点的样式
    d3.selectAll(".points")
        .style("fill", "red")
        .style("opacity", 0.6);
    
    // 修改当前点击节点的样式
    d3.select(this)
        .style("fill", "green")
        .style("opacity", 1);
    
    // 这里可以添加更多逻辑，比如弹出详细信息或者触发其他操作
    console.log(`选中城市: ${d.city}，价格: ${d.price}`);
});

3. 可选：用CSS实现基础悬停样式 #

如果你只需要简单的悬停样式，也可以直接用CSS伪类，不需要JS事件：

.points:hover {
    fill: orange !important;
    opacity: 1 !important;
    transform: scale(1.2); /* 放大效果，比修改r属性更平滑 */
}

注意：SVG元素的r属性用CSS修改兼容性不如JS，用transform: scale()实现放大效果更流畅。

为什么不用<foreignObject>？ #

<foreignObject>的作用是在SVG中嵌入HTML内容（比如复杂的文本块、表单等），而咱们的需求只是修改SVG圆形节点的样式和交互，直接操作SVG元素本身就足够了，完全不需要引入<foreignObject>，反而会增加复杂度。

内容的提问来源于stack exchange，提问作者WenukaGTX