score:1

Accepted answer

There are several ways for achieving this. Since both circles and texts use the same dataset, my solution uses filter.

First, let's name the variables for the texts and circles:

var circles = svg.selectAll("circle")
    //etc...

var texts = svg.selectAll("text")
    //etc...

Then, inside the circles mouseover function, we filter the texts that have the same colour attribute:

.on("mouseover", function(d){
    d3.select(this).style("stroke", "black").style("stroke-width", 2);
    var tempTexts = texts.filter(function(e){
        return e.colour === d.colour
    });
    tempTexts.style("opacity", 1);
});

This is your updated fiddle: https://jsfiddle.net/wxh95e9u/


Related Query