D3.js D3分组条形图-选择整个组？

我有一个类似于
我使用mouseover函数来淡出鼠标当前未结束的条

function mouseover(bar)
{
   d3.selectAll(".bar")
     .filter(function(d){ return (d != bar);})
     .transition(t)
        .style("opacity", 0.5);
}

虽然这可以很好地突出显示单个条，但我现在需要突出显示整个组/淡出除此组之外的所有内容。
到目前为止，我还没有弄清楚如何从通过

.on（“mouseover”，function（d）…

传递的基准元素

d

返回到该元素所属的整个组。
在D3v4中是否有一种简单的方法可以实现这一点？

一种解决方案可以是：

制作一个选择所有组的函数，并为其提供不透明度为0的过渡

鼠标位于其上方的DOM的不透明度为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.
  }  

制作一个函数，当鼠标不在时，选择所有组并将其转换为不透明度1

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

在组中添加一个类并添加鼠标进出功能，如

  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)

D34.0中的工作代码：当前基准（d）、当前索引（i）和当前组（节点）

在鼠标悬停回调中，您可以

selectAll（“rect”）

，并过滤掉当前组（

node

）中的项目。通过此选择，您可以将不透明度设置为0.5。在鼠标悬停时，您只需将所有不透明度设置回1.0。相关代码为：

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

使用一个小的helper函数检查数组中是否存在值（在本例中为DOM元素数组）：

上下文中的完整代码（给出链接示例）：

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

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