选择除特定数据集之外的所有内容

Question

我需要选择除我悬停在上面的数据集之外的所有内容，到目前为止，我已经选择了它this但没有被选中，但现在我需要让它如此this并且没有选择具有通用数据集的所有内容

.on("mouseover", function(d) {
console.log(d);
var circleUnderMouse = this;
d3.selectAll(".dot").filter(function(d,i) {
return (this !== circleUnderMouse);
})
})

Answer 1

你可以只使用datum参数，而不是使用this。

当您将鼠标悬停在节点上时...

将为每个选定元素评估指定的侦听器，并传递当前基准 (D)、当前索引 (i) 和当前组(节点)，并将其作为当前 DOM 元素。

因此，要查找具有相同数据的所有其他元素，您可以只使用包含基准的第一个参数，而不是DOM元素的 this。

这是一个演示向您展示。我们有一个包含位置的数据集和一个名为type的键：

var data = [{type: "foo", x: 30, y: 90},
{type: "foo", x: 10, y: 50},
//etc...
];

将鼠标悬停在一个圆圈上，我们将选择所有其他不共享type相同值的圆圈，使它们消失：

circles.on("mouseover", function(d) {
var filtered = circles.filter(function(e) {
return e.type != d.type
});
filtered.attr("opacity", 0);
})

这是演示：

var svg = d3.select("svg");
var data = [{
type: "foo",
x: 30,
y: 90
}, {
type: "foo",
x: 10,
y: 50
}, {
type: "foo",
x: 220,
y: 130
}, {
type: "baz",
x: 40,
y: 40
}, {
type: "bar",
x: 170,
y: 20
}, {
type: "baz",
x: 220,
y: 110
}, {
type: "bar",
x: 130,
y: 120
}, {
type: "foo",
x: 150,
y: 50
}, {
type: "baz",
x: 30,
y: 110
}, {
type: "foo",
x: 100,
y: 220
}];
var color = d3.scaleOrdinal()
.domain(["foo", "bar", "baz"])
.range(["teal", "brown", "gold"]);
var circles = svg.selectAll(".circles")
.data(data)
.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 8)
.attr("fill", d => color(d.type));
circles.on("mouseover", function(d) {
var filtered = circles.filter(function(e) {
return e.type != d.type
});
filtered.attr("opacity", 0);
}).on("mouseout", function() {
circles.attr("opacity", 1)
})

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