如何添加簡單的鼠標懸停信息窗口

Question

我想在條形圖上添加一個簡單的鼠標懸停在信息窗口上，以便用戶查看確切的數據。我如何將這個添加到這個d3條形圖？

這裏是Plunker https://plnkr.co/edit/d0ReUGwk4l066yuMZYXw?p=preview

我以爲我可以這樣添加的東西，但我得到的錯誤

bars.attr("y", function(d) { 
    return y(d.state); 
}) 
    .attr("height", y.rangeBand()) 
    .attr("x", 0) 
    .attr("width", function(d) { 
     return x(); 
    }) 
    .attr("fill", function(d, i) { 
     return color(i); 
    }) 
    .attr("id", function(d, i) { 
     return i; 
    }) 
    .on("mouseover", function() { 
     d3.select(this) 
      .attr("fill", "red"); 
    }) 
    .on("mouseout", function(d, i) { 
     d3.select(this).attr("fill", function() { 
      return "" + color(this.id) + ""; 
     }); 
    }); 

bars.append("title") 
    .text(function(d) { 
     return ""; 
    }); 

Answer 1

的一種方法如下：

添加工具提示div元素，你將被默認爲不可見的，可以通過編程與D3的數據更新，並讓鼠標懸停在事件可見。

<style> 
#tooltip { 
    background: rgba(255, 255, 255, 0.92); 
    position:absolute; 
    height:auto; 
    visibility:hidden; 
    z-index:9999; 
    padding:5px; 
    border: 1px solid #ddd; 
    padding: 5px 15px 5px 15px; 
    font-family: arial, sans-serif; 
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); 
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); 
} 
</style> 
<div id="tooltip"> 
    <div id="container"> 
    <div id="series">y</div> 
    </div> 
    <span>X: </span><span id="xval"></span><br/> 
    <span>Y: </span><span id="yval"></span> 
</div> 

稍後，您將其添加到代表酒吧的rect元素中。這應該是不言自明的。隨意發表評論，如果您有任何的步驟不清晰：

.on("mouseover", function(d) { 
    d3.select("#tooltip") 
     .style("left", x1(d.key) + x0(d.state) + "px") 
     .style("top", y(d.value) - 50 + "px") 
     .transition() 
     .style("visibility", "visible"); 
    d3.select("#series") 
     .text(d.key); 
    d3.select('#xval') 
     .text(d.state); 
    d3.select("#yval") 
     .text(d3.format("0.6")(d.value)); 
}); 

請注意，我也改變了你的數據環路，以確保狀態值也存儲每個rect元素讓你可以輕鬆拉它出於工具提示。

這裏是一個工作版本：

https://plnkr.co/edit/EoJbTgmRZ1VXTtmfLd9A?p=preview

PS - 我強烈建議學習推出自己的工具提示現在。可能有一個庫需要你做的所有事情，但是工具提示相當直觀，可以幫助你提高對使用d3和javascript處理交互式可視化的基本理解。此外，如果您自行推出，則可以靈活自信地創建自定義類型的工具提示，以便更好地滿足您的要求，而不是嘗試使用具有有限自定義選項的庫。

Answer 2

我不很清楚d3.js但此頁解釋瞭如何添加工具提示到d3條形圖：http://bl.ocks.org/Caged/6476579

希望它能幫助你。要做到這一點