D3.js 从图表中删除重叠点

工作区：

我有一个工作散点图，当你从下拉列表中选择一个字母时，名字中带有所选字母的点会改变颜色和大小；但我似乎不知道如何删除旧点（或者完全覆盖旧点），这样它们就不会与选定的点重叠

var changeSelectedColor = function(selPop){
    d3.selectAll('circle')
        .transition().duration(1500)
        .attr("cx",d => xScale(xData(d)))
        .attr("cy",d => yScale(yData(d)))
        .style("fill",'black')
        .attr("r",3.5)
    d3.selectAll('circle.selected')
        .transition().duration(1500)
        .attr("cx",d => xScale(xData(d)))
        .attr("cy",d => yScale(yData(d)))
        .style('fill','orange')
        .attr("r",10)
        .style('opacity',100)
}

---

我尝试了多次exit（）.remove（）的迭代，但都没有成功。注意：当下拉项更改时，我将选定点上的class属性更改为“selected”。相关的重新绘制函数是第87行（是的，我可能重新绘制不正确；我对不同的enter（）.append（）或.join（）建议持开放态度）。

我认为您要做的主要更改是在更新之前过滤

选择，而不是过滤
数据
：

dots.filter(d => d.Types.includes(sel)).attr("class",'selected') 

我还认为添加一个
“not selected”
类（在如上所述覆盖所选类之前）将更容易更新两类点：

dots.attr('class', 'not-selected')

最后，我添加了确保重置非选定点的不透明度。小提琴。
它起作用了。不知道为什么我尝试使用.classed（）而不是generic.attr（）