Question

我目前有一张世界地图，我的地图上某个国家/地区的点击事件会在同一个地方添加一个不同颜色的矩形。我所拥有的代码的问题是单击这些国家将导致在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：如何删除点击事件的形状？

1 个答案: