css - D3 反转事件监听器的选择(此)

Question

我有一个包含许多矩形的视觉对象，并且我给了它们类graph_rects。我的目标是，当用户单击具有该类的矩形时，它将保持该矩形的颜色相同，但将所有其他 graph_rects 变为灰色。然而我的方法不起作用，不幸的是很难排除故障，因为日志中没有错误。

我的 CSS 变灰规则:

.graph_rects unselected {
    fill:gray;
}

我在矩形创建/附加时的 D3 事件监听器:

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

我很确定我的 CSS 没问题，我的预感是我的 d3 逻辑不正确。

更新

这里有一些相关的代码行，可能有助于拼凑出为什么所提出的解决方案对我不起作用(目前)。我试图通过使选择器具有冗余 ID 来排除我的图形矩阵(例如 this 1)是否是罪魁祸首。因此，我创建了一个 id，其中包含对应维度的 i 和 j 以及索引的 i。这样，一个矩形就不可能与来自不同图表的另一个矩形具有相同的 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”:“.graph_rects:not(#219)”不是有效的选择器

我想知道我哪里做错了？

Answer 1

第一个问题，你的 CSS 应该是:

.graph_rects.unselected {
    fill: gray;
}

但这并不是这里的大问题。最大的问题就在这里:

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

在该行中，您告诉 D3 不要选择任何 <this></this>元素。当然，这样的元素并不存在!

有多种方法可以实现您想要的目标，不同的程序员有他们最喜欢的方法(我有我的，它不使用 not )。但是，我将尝试提供一个解决方案来保持 not选择器:而不是使用 not(this) ，它实际上选择了名为 this 的内容，您可以按类或按 id 选择(记住，ID 必须是唯一的)。例如:

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

这是一个示例，单击栏:

var svg = d3.select("svg");
var rects = svg.selectAll("planck")
  .data(d3.range(10))
  .enter()
  .append("rect")
  .attr("class", "graph_rects")
  .attr("id", function(d, i) {
    return "rect" + i
  })
  .attr("x", function(d, i) {
    return i * 25
  })
  .attr("y", 0)
  .attr("width", 20)
  .attr("height", 150)
  .attr("fill", "firebrick")
  .on('click', function() {
    d3.selectAll(".graph_rects:not(#" + this.id + ")").classed('unselected', true);
    d3.select(this).classed("unselected", false)
  })

.graph_rects.unselected {
  fill: gray;
}

.graph_rects {
  cursor: pointer;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>