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鼠標懸停的分組條形圖突出顯示組

回答

相關問題