javascript - 悬停时的 D3.js 工具提示

Question

我正在按照本教程获取图表的工具提示:

http://bl.ocks.org/d3noob/c37cb8e630aaef7df30d

它的工作就像一个魅力!

但是有一个问题...

教程中显示的当前图形在线上有黑点...

我希望工具提示和黑点仅在我将鼠标悬停在它们上面时出现，而不总是像当前显示的那样。

有办法吗？

Answer 1

用 mouseout 更新了答案: https://plnkr.co/edit/9Ej1MYpGqxBdeWO2FUNO?p=preview

.on("mouseover", function(d) {
// show circle selected
  d3.select(this)
    .transition()
          .duration(200)
    .style("opacity", 0.9);

.on('mouseout', function(d) {
    // hide the circle
    d3.select(this)
        .transition()
        .duration(100)
        .style("opacity", 0);
    // hide the tooltip
    d3.selectAll(".tooltip")
      .transition()
      .duration(100)
      .style("opacity",0); 

要使用mouseout，您需要将工具提示稍微向上移动，并将整个svg 向下移动一点。

div.html(
    '<a href= "http://google.com">' + // The first <a> tag
    formatTime(d.date) +
    "</a>" +                          // closing </a> tag
    "<br/>"  + d.close)  
    .style("left", (d3.event.pageX) + "px")          
    .style("top", (d3.event.pageY - 42) + "px"); // up a bit
var margin = {top: 50, right: 20, bottom: 30, left: 50}, // down a bit

由于mouseout非常灵敏，鼠标移开后圆圈会立即消失，所以最好稍微增加半径:

 svg.selectAll("dot")                                   
    .data(data)                                         
    .enter().append("circle")                               
    .attr("r", 8)   // slightly bigger for human reaction

不过，我认为不使用 mouseout 是一种更好、更直观的方法:

旧的工作示例(加载需要几秒钟):https://plnkr.co/edit/IitMgKW0jDYlWifokcZB?p=preview

你需要做的改动是在.on("mouseover", function(d)中，添加如下代码:

    .on("mouseover", function(d) {
    // hide other circles
      d3.selectAll('circle')
        .style("opacity", 0);
    // show circle selected
      d3.select(this)
        .transition()
        .duration(200)
        .style("opacity", 0.9);

.on("mouseout", function(d) 不适用于这种情况，因为圆圈与工具提示重叠。