Question

我有一个类似于Twig_SimpleFunction的分组条形图我使用鼠标悬停功能淡化鼠标当前没有结束的条纹

虽然这可以很好地突出显示单个条形图，但我现在需要突出显示整个组/淡化除此组之外的所有内容。
到目前为止，我还没有能够弄清楚如何从通过.on("mouseover", function(d) ...传递的基准元素{{1}}返回到该元素所属的整个组。
有没有一种简单的方法可以在D3v4中实现这一目标？

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

Answer 2

一种解决方案可能是：

创建一个选择所有组的函数，并为其提供不透明度0的转换。

鼠标结束的DOM会产生不透明度。

  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

D3 Grouped Bar Chart - 选择整个组？

2 个答案: