D3.js d3 selection.exit（）.remove（）如何工作

使用此代码创建矩形后

   svg.append("g")
    .selectAll("rect")
    .data(datayh)
    .enter()
    .append("rect")
    .attr("class", "box1")
    .attr("x", xleft)
    .attr("height", function(d){return d[1]})
    .attr("y", function(d){return d[0]})
    .attr("width", 20)
    .attr("transform", function(d, i) { return "translate(" +  x(i) + "," + margin.top + ")"; } )
    .style("fill", colvar);

我想用以下方法删除它们：

d3.select("p4")
   .on("click",function(){
   var norect =svg.selectAll("rect.box1")
                        .data([]);
   var exitrect = norect.exit();
   exitrect.remove();
   });

如果我在extract.remove（）之后立即中断点，则矩形将被删除。但不知怎的，他们在匿名函数完成时回来了。控制台显示

<g></g>
<g>…</g>

…

其中，

…

包含原始元素（其中7个）。例如：

<rect class="box1" x="12" height="194.0277614889706" y="243.8520963541667" width="20" transform="translate(34,30)" style="fill: red;"></rect>

再次单击p4将添加到DOM中

<g></g>
<g></g>
<g>…</g>

…

---

这就好像d3只是在内存中获取一个rect的副本，删除它们，添加到DOM中，但保留原始的rect。我如何才能删除矩形的？任何解释都将不胜感激。

要删除元素，

remove（）

就足够了

 d3.select("p4")
   .on("click", function(){
      svg.selectAll("rect.box1").remove();
   });

---

对于删除元素，

remove（）

就足够了

 d3.select("p4")
   .on("click", function(){
      svg.selectAll("rect.box1").remove();
   });

---

你能提供一个完整的例子来说明问题吗？你能提供一个完整的例子来说明问题吗？我走错了路。我有一个创建矩形的p3:d3.select（“p3”）.on（“click”，function（）{draw（）；}）；问题是p3和p4在同一个div中。因此，单击p4时，会调用p4事件处理程序，但p3事件处理程序随后会运行。p3重新创建rect的。当p3和p4在单独的分区中时，问题解决了。我走错了路。我有一个创建矩形的p3:d3.select（“p3”）.on（“click”，function（）{draw（）；}）；问题是p3和p4在同一个div中。因此，单击p4时，会调用p4事件处理程序，但p3事件处理程序随后会运行。p3重新创建rect的。当p3和p4位于单独的分区中时，问题已解决。