D3 分组条形图 - 选择整个组？答案

【问题标题】：D3 Grouped Bar Chart - Selecting entire group?D3 分组条形图 - 选择整个组？
【发布时间】：2017-02-20 08:26:15
【问题描述】：

我有一个类似于https://bl.ocks.org/mbostock/3887051的分组条形图
我使用了 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 中是否有一种简单的方法来实现这一点？

【问题讨论】：

标签： d3.js

【解决方案1】：

在 D3 4.0 中，callback function for the .on() method is passed 3 arguments：当前数据 (d)、当前索引 (i) 和当前组（节点）。

在鼠标悬停回调中，您可以selectAll("rect")，并过滤掉当前组（node）中的项目。使用此选择，然后将不透明度设置为 0.5。在 mouseout 上，您只需将所有不透明度设置回 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);
    });

使用一个小的辅助函数来检查一个值是否存在于数组中（在我们的例子中是 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);
    });

【讨论】：

【解决方案2】：

一种解决方案可能是：

创建一个选择所有组并赋予其不透明度为 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)

工作代码here

【讨论】：