D3分组条形图-选择整个分组? [英] D3 Grouped Bar Chart - Selecting entire group?

问题描述

我有一个分组的条形图，类似于 https://bl.ocks.org/mbostock/3887051
我使用了mouseover功能来淡化鼠标当前尚未结束的条形图

I have a grouped bar chart similar to https://bl.ocks.org/mbostock/3887051
I used a mouseover function to fade the bars the mouse is currently not over

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

虽然可以很好地突出显示单个条，但是我现在需要突出显示整个组/淡出除该组以外的所有内容.
到目前为止，我仍无法弄清楚如何从通过.on("mouseover", function(d) ...传递的基准元素d返回到该元素所属的整个组.
在D3v4中有实现此目的的简单方法吗?

While this works nicely to highlight a single bar, I now need to highlight the entire group / fade everything but this group.
So far I haven't been able to figure out though how to get from the datum element d passed via .on("mouseover", function(d) ... back to the entire group this element belongs to.
Is there a simple way to achieve this in D3v4?

推荐答案

在D3 4.0中，为.on()方法的回调函数传递了3个参数:当前数据(d)，当前索引(i)和当前组(节点).

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

在鼠标悬停回调中，您可以selectAll("rect")，并过滤出当前组(node)中的项目.使用此选择，然后将不透明度设置为0.5.在mouseout上，您只需要将所有不透明度设置回1.0.相关代码为:

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

带有一个小的辅助函数，用于检查数组(在本例中为DOM元素数组)中是否存在值:

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

这篇关于D3分组条形图-选择整个分组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！