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之一）是否是罪魁祸首。因此，我创建了一个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)
})

不幸的是我收到以下错误：

无法在'Document'上执行'querySelectorAll'：'。chart_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 + ")")

这是一个例子，点击栏：

＆＃13;

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)
  })

＆＃13;

.graph_rects.unselected {
  fill: gray;
}

.graph_rects {
  cursor: pointer;
}

＆＃13;

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

＆＃13;

D3从事件监听器反转选择（this）

1 个答案: