D3：如何删除单击事件形状？(D3: How delete shape on click event

我现在有一个世界地图上对我的地图的国家之一单击事件将在同一位置添加一个矩形用不同的颜色。 与我的代码的问题是，点击国家将导致矩形的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)");

        }
    }

Answer 1:

你可以这样做

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

   }

文章来源: D3: How delete shape on click event?