鼠标悬停时d3分组条形图突出显示组-Java 学习之路

问题＃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的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索引 . 但我不能选择那么，返回“ . ” 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上的文本，突出显示现在正常工作 .

任何帮助将不胜感激，

谢谢

2 回答

你可以在其.name值（这是你的例子中每个组的公共属性）的所有条形的不透明度基础上，例如

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

    //etc

回复于 2024-05-01T06:52:15+08:00

这有效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");
      })

回复于 2024-05-01T06:52:15+08:00

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

2 回答

相关问题