score:2

Accepted answer

In D3 4.0 the callback function for the .on() method is passed 3 arguments: the current datum (d), the current index (i), and the current group (nodes).

Within the mouseover callback, you can selectAll("rect"), and filter out items which are in the current group (node). With this selection, you then set opacity to 0.5. On mouseout, you just need to set all opacity back to 1.0. The pertinent code is:

 ...
   .on('mouseover', function(d, i, node) {
    d3.selectAll("rect")
      .filter(function (x) { return !isInArray(this, node)})
      .attr('opacity', 0.5);
   }
  )
  .on('mouseout', function() {
    d3.selectAll("rect").attr('opacity', 1.0);
    });

with a small helper function to check if a value is present in an array (array of DOM elements in our case):

 function isInArray(value, array) {
     return array.indexOf(value) > -1;
 }

The full code in context (given your linked example):

g.append("g")
 .selectAll("g")
 .data(data)
 .enter().append("g")
   .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; })
 .selectAll("rect")
 .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
 .enter().append("rect")
   .attr("x", function(d) { return x1(d.key); })
   .attr("y", function(d) { return y(d.value); })
   .attr("width", x1.bandwidth())
   .attr("height", function(d) { return height - y(d.value); })
   .attr("fill", function(d) { return z(d.key); })
   .on('mouseover', function(d, i, node) {
    d3.selectAll("rect")
      .filter(function (x) { return !isInArray(this, node)})
      .attr('opacity', 0.5);
   }
  )
  .on('mouseout', function() {
    d3.selectAll("rect").attr('opacity', 1.0);
    });

score:1

One solution could be:

Make a function which selects all group and gives it a transition of opacity 0.

The DOM on which mouse is over give opacity 1.

  function hoverIn(){
    d3.selectAll(".group-me").transition()
        .style("opacity", 0.01);//all groups given opacity 0
    d3.select(this).transition()
        .style("opacity", 1);//give opacity 1 to group on which it hovers.
  }  

Make a function which selects all group and gives it a transition of opacity 1, when the mouse is out.

  function hoverOut(){
    d3.selectAll(".group-me").transition()
        .style("opacity", 1);
  }  

On the group add a class and add the mouse out and in function like

  g.append("g")
    .selectAll("g")
    .data(data)
    .enter().append("g")
    .classed("group-me", true)//add a class for selection.
    .on("mouseover", hoverIn)
    .on("mouseout", hoverOut)

working code here


Related Query