如何使用 d3 有条件地删除元素？

Question

我有一张图表。我加载了一个我解析的文件，以获得我需要对图形进行的更改。有关更改的信息以节点名称的形式出现，存储在每个节点的文本字段中。

我如何 select 基于其文本字段内容的节点，以便我可以删除它？

下面是我要删除的节点的 HTML。

<circle style="fill: rgb(204, 204, 204);" r="8"></circle><text dy=".35em" x="12">d1</text>

Answer 1

1) 您可以在设置文本内容时将元素的 class 设置为（也）为文本内容。然后你可以 select 通过 class.

2) 如果您可以应用 select 或者仅针对这个元素，您可以获得元素的文本内容：

selection.text()

3) 在大多数情况下，您可以使用一些数据动态设置文本。如果数据绑定到元素，您可以将其与标准回调函数一起使用

selection.filter( function (d,i) {...// filter based on d }).remove();

Answer 2

你的文本节点在我想你想删除的圆圈节点之外，这有点困难。但如果不是，你可以这样做：

d3.selectAll('circle>text').filter(function(d){
    return d3.select(this).text() ==="d1";
}).remove()

How do you conditionally remove elements with d3?