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

问题1：有分组的条形图。如果小组中的任何酒吧都被淹没，我希望小组强调一下。

当前在鼠标悬停上将所有带有“bar”的rects设置为opacity 0.5，然后将特定rect设置为opacity 1。但是，如何将节点或bar组设置为opacity 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

我曾尝试加入吧于x轴文本的CLAS，但不工作，

.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上的文本突出显示现在工作正常。

任何帮助将不胜感激，

感谢

来源

2017-08-09 Shane G

这工作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"); 
     })

来源

2017-08-10 15:07:52

，你可以为基础对其.NAME值的所有酒吧的不透明度（即每组共同的属性在你的例子），例如

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

    //etc

来源

2017-08-09 23:07:04

是的，我当时就在想，如果是感谢。但是，当然两个同名的人不太可能，名字实际上是作为第一名和第二名出现的，所以两个班级和更多的变化人与第二名相冲突。 –

也许是将第一个和第二个名称的组合与id连接在一起。所以约翰墨菲可能会成为指数16的johnmurphy16。我认为这对每个酒吧都是独一无二的。 –

我可以添加一个类的名称，删除空格和索引连接像这样.attr（“class”，function（d，i）{return \\.name.replace（/ \ s/g，''）+ i +“bar” }） –

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

回答

相关问题