从 svg 中删除特定颜色的矩形 - javascript答案

【问题标题】：Remove rect(s) of specific colour from svg - javascript从 svg 中删除特定颜色的矩形 - javascript
【发布时间】：2014-10-13 18:04:16
【问题描述】：

我有一个图表，其中包含两种颜色的矩形 - 紫色和橙色。我正在寻找一种仅删除函数调用上的紫色矩形的方法。我该如何适应；

 svg.selectAll("rect").remove()

为了这个目的？

我的矩形定义为；

紫色矩形

        .brush .extent {
            stroke: #DB4D94;
            fill-opacity: .125;
            shape-rendering: crispEdges;
        }

橙色矩形

        .time-span {
            stroke: orange;
            fill-opacity: .7;
            shape-rendering: crispEdges;
        }

它们都用于添加不同类型的矩形，并且画笔在函数调用时变为矩形 - 所以不用担心它不会被识别为矩形，它是！

谢谢

【问题讨论】：

【解决方案1】：

你可以简单地给紫色矩形一个更独特的类名，比如.rect-purple，然后删除它们

 svg.selectAll('.rect-purple').remove()

D3 选择的工作方式与 jQuery 选择类似。

【讨论】：

【解决方案2】：

您可以使用CSS attribute value selector：

svg.selectAll("rect[stroke=purple]").remove();

鉴于您使用 CSS 类设置矩形样式，您也可以使用这些类来选择元素：

svg.selectAll(".brush .extent").remove();

【讨论】：