Css D3从事件侦听器反转选择（此）

我有一个包含许多矩形的可视化工具，我给了它们类

graph\u rects

。我的目标是，当用户使用该类单击某个矩形时，它将使该矩形保持相同的颜色，但将所有其他

graph\u矩形变为灰色。然而，我的方法不起作用，不幸的是，很难排除故障，因为日志中没有错误

我的CSS灰显规则：

.graph_rects unselected {
    fill:gray;
}

在rect创建/追加时我的D3事件侦听器：

.on('click', function(d) {
    return d3.selectAll(".graph_rects:not(this)").classed('unselected',true)
})

我很确定我的CSS是好的，我的直觉是我的d3逻辑是不正确的

更新

下面是一些相关的代码行，它们可能有助于拼凑出为什么建议的解决方案（目前）对我不起作用。我试图通过使选择器具有冗余ID来排除我的图矩阵（例如一个）是否是罪魁祸首。因此，我创建了一个id，该id具有对应维度的
I
和
j
，以及索引的
I
。这样一来，一个rect就不可能与来自不同图形的另一个rect具有相同的id

.attr('id', function(d,i) {
    return String(p.i+p.j)+i
})

此外，根据建议的解决方案，这里是我的事件侦听器：

.on('click', function(d) {
    d3.selectAll('.graph_rects:not(#'+this.id+')').classed('unselected',true)
    d3.select(this).classed('unselected',false)
})

不幸的是，我得到了以下错误：

未能对“文档”：“执行'querySelectorAll'。图形_rects:not（#219）'不是有效的选择器

我想知道什么地方做得不对？
第一个问题，您的CSS应该是：

.graph_rects.unselected {
    fill: gray;
}

但这不是这里的大问题。大问题在于：

d3.selectAll(".graph_rects:not(this)")

在这一行中，您告诉D3不要选择任何
元素。当然，这样的元素并不存在

有几种方法可以实现您想要的，不同的编码者有他们最喜欢的方法（我有我的方法，它不使用
而不是
）。但是，我将尝试提供一种解决方案，保留
not
选择器：不要使用
not（this）
，它从字面上选择一个名为
this
的对象，您可以按类或按id进行选择（记住，id必须是唯一的）。例如：

d3.selectAll(".graph_rects:not(#" + this.id + ")")

以下是一个示例，单击条形图：


var svg=d3.选择（“svg”）；
var rects=svg.selectAll（“普朗克”）
.数据（d3.范围（10））
.输入（）
.append（“rect”）
.attr（“类”、“图矩形”）
.attr（“id”，函数（d，i）{
返回“rect”+i
})
.attr（“x”，函数（d，i）{
返回i*25
})
.attr（“y”，0）
.attr（“宽度”，20）
.attr（“高度”，150）
.attr（“填充”、“耐火砖”）
.on（'单击'，函数（））{
d3.选择全部（“.graph_rects:not（#“+this.id+”））.classed（'unselected'，true）；
d3.选择（此）.classed（“未选择”，false）
})
.graph\u rects.unselected{
填充物：灰色；
}
.graph_rects{
光标：指针；
}

很好的解释！现在对我来说，这很直观，但我仍然无法让它在我的特定文档中工作。实际上，我的文档中有几个图，我为每个图更新了
数据
var。我想这实际上可能会导致ID不是唯一的（因为
（d，I）
会为每个ID重新开始）。不过，我没有收到任何错误。如果存在冗余ID，它会抛出错误吗？@ArashHowaida不，它不会，这就是为什么你必须注意它。在您的情况下，我建议您使用另一种方法，而不是像现在这样定义一个类。希望这些信息会有帮助。另一件我刚刚意识到的事情是，我正在使用D3 v3，但我不相信选择的基础改变了那么多，所以也许这不会是一个问题。@ArashHowaida，请不要在同一个问题中混合不同的问题，也不要编辑你的问题来问一个新问题（改为写一个新问题）。正如我在回答中所表明的那样，这里的问题已经解决了。这里有一个新问题：ID不能以数字开头。嗯，这可以解释很多。当你身处其中时，很难知道你有一个单独的问题。老实说，这似乎是一个大问题。平心而论，我想你是对的。谢谢你一直支持我。