D3.js D3：如何在点击事件中删除形状？

我现在有一张世界地图，在我地图上的一个国家的点击事件中，它会在同一个地方添加一个不同颜色的矩形。我的代码存在的问题是，单击国家/地区将导致在svg中添加矩形（每次单击时，一个矩形都会被添加到另一个矩形之上），因为我正在添加它们。我想做的是在单击其中一个国家时删除先前添加的矩形，然后添加下一个

我曾考虑使用.remove（），但我不确定这是否正确，也不确定如何在代码中实现它

非常感谢您的任何帮助或建议！ 提前谢谢

我的密码

.on("click",clicked)



function clicked(d,i) {
        if(d.properties.name === "Mexico") {
            var rectGroup = svg.append("g");

            var rectGreen = rectGroup.append("rect")
                  .attr("width", 100)
                          .attr("height", 100)
                          .attr("fill", "green")
                          .attr("transform", "translate(50, 0)");

        }else {
            var rectGroup = svg.append("g");

            var rectBlue = rectGroup.append("rect")
                  .attr("width", 100)
                          .attr("height", 100)
                          .attr("fill", "blue")
                          .attr("transform", "translate(50, 0)");

        }
    }

---

你可以这样做

        var creation=Date.now();
        var rectBlue = rectGroup.append("rect")
               .attr("width", 100)
               .attr("height", 100)
               .attr("fill", "blue")
               .attr("transform", "translate(50, 0)")
               .attr('id','rect_'+creation)
               .attr('onclick',"removeRect('rect_"+creation+"')")

)

然后有一个函数

    function removeRect(id){
          d3.selectAll('g #'+id).remove();

   }