d3鼠标悬停时分组条形图突出显示组答案

【问题标题】：d3 grouped bar chart highlight group on mouseoverd3鼠标悬停时分组条形图突出显示组
【发布时间】：2017-08-09 17:41:51
【问题描述】：

已解决：jsfiddle

问题 #1：有一个分组条形图。如果组中的任何条被鼠标悬停，我希望组突出显示。

当前在鼠标悬停时，将所有具有“bar”类的矩形设置为不透明度 0.5，然后将特定矩形设置为不透明度 1。但是如何将节点或条组设置为不透明度 1，以便它们与其他矩形突出显示？

.on("mouseover", function(d, i, node) { //this is repeated should be in a function
        d3.selectAll(".bar").transition()
          .style("opacity", 0.3); //all groups given opacity 0
        d3.select(this).transition()
          .style("opacity", 1); //give opacity 1 to group on which it hovers.
        return tooltip
          .style("visibility", "visible")
          .html("<span style=font-size:30px;> " + "name:" + d.name +
            "</span>"
          )
      })
      .on("mouseout", function(d) {
        d3.selectAll(".bar").transition()
          .style("opacity", 1);
        return tooltip.style("visibility", "hidden");
      })

问题 #2：我也希望条形图的 x 轴标签表现类似。这样除了当前栏之外的所有名称都具有不透明度 0.5

我确实尝试在 xAxis 文本中添加 bar 类，但不起作用，

.call(xAxis)
      .selectAll("text")
      .style("text-anchor", "end")
      .style("font", "20px times")
      .attr("dx", "-.8em")
      .attr("dy", ".15em")
      .attr("class", "bar")
      .attr("transform", "rotate(-65)");

我尝试实现这篇文章中的想法

D3 Grouped Bar Chart - Selecting entire group?

但我无法让它工作。

我尝试为组中的每个条提供一个 d.name + index 类。但是我不能选择，返回“。” + d.name 没有按我的预期工作。

      .attr("class", function(d, i) {
       return d.name.replace(/\s/g, '') + i + " bar"
      })
      .on("mouseover", function(d, i, node) { 
        d3.selectAll(".bar").transition()
          .style("opacity", 0.3); 
        d3.selectAll("." + d.name.replace(/\s/g) + i)
          .transition()
          .style("opacity", 1); 
        return tooltip
          .style("visibility", "visible")
          .html("<span style=font-size:30px;> " + "name:" + d.name +
            "</span>");
      })

选择应该是，

d3.selectAll("." + d.name.replace(/\s/g, '') + i)

实际上，每个组中的每个条都可以被赋予一个“组+索引”类。不需要正则表达式。

除了 xAxis 上的文本，突出显示现在工作正常。

任何帮助将不胜感激，

谢谢

【问题讨论】：

标签： d3.js bar-chart highlight grouped-collection-select

【解决方案1】：

您可以将所有条的不透明度基于其 .name 值（在您的示例中这是每个组的通用属性），例如

.on("mouseover", function(d) { 
    let selectedName = d.name;
    d3.selectAll(".bar")
      .style("opacity", function(d) {
        return d.name == selectedName ? 1 : 0.3;
      })

    //etc

【讨论】：

是的，我只是想如果那谢谢。但是当然，两个人同名的可能性不大，而且这个名字实际上是一个名字和第二个名字，所以两个类和更多的变化的人在第二个名字上发生冲突。
可能是名字和名字的组合，并用连接的 id 修剪。所以 john murphy 可以成为索引 16 的 johnmurphy16。我认为这对于每个条形都是唯一的。
我可以添加一个名称类，删除空格并像这样连接索引 .attr("class", function(d, i) { return d.name.replace(/\s/g , '') + i + "条" })
实际上每个组中的每个条都可以被赋予一个“组+索引”类。不需要正则表达式。

【解决方案2】：

这工作jsFiddle

.on("mouseover", function(d, i, node) {
        d3.selectAll(".bar").transition()
          .style("opacity", 0.3);
        d3.selectAll(".xAxisText").transition()
          .style("fill", "lightgray")
          .style("font-weight", "100"); //all groups given opacity 0
        d3.selectAll(".groupText" + i)
          .transition()
          .style("font-weight", "900")
          .style("fill", "black"); //give opacity 1 to group on which it hovers.
        d3.selectAll(".group" + i)
          .transition()
          .style("opacity", 1);
        return tooltip
          .style("visibility", "visible")
          .html("<span style=font-size:30px;> " + "name: " + d.name +
            " (on blue bar)</span>");
      })
      .on("mouseout", function(d) {
        d3.selectAll(".bar").transition()
          .style("opacity", 1);
        d3.selectAll(".xAxisText").transition()
          .style("fill", "black")
          .style("font-weight", "normal");
        return tooltip.style("visibility", "hidden");
      })

【讨论】：