Select everything but a specific data set

Question

I need to select everything excluding a data set I hover over, so far i have it so this is not selected but now i need to make it so this and everything with a common data set is not selected

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

you can use :not selector d3.select("svg").selectAll("*:not(.dot)"); replace svg by ur rtto element — Vinod Louis, Nov 25 '16 at 06:59

Gerardo Furtado · Answer 1 · 2016-11-25T11:49:13.673

Instead of using this, you can use just the datum argument.

When you hover over a node...

the specified listener will be evaluated for each selected element, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element.

So, to find all other elements with the same data, you can use only the first argument, which contains the datum, not this, which is the DOM element.

This is a demo to show you. We have a dataset with positions and a key named type:

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

Hovering over a circle, we will select all other circles that don't share the same value for the type property, making them disappear:

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

Here is the demo:

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>

Select everything but a specific data set

1 Answers1