具有鼠标悬停工具提示的多重系列折线图

Question

具有鼠标悬停工具提示的多重系列折线图

我使用这个bl.ocks.org代码示例创建了一个多系列折线图。我已经设法在JSFiddle上重新创建它。

现在，我正在尝试添加一个x值鼠标悬停工具提示，当您悬停其垂直位置时，它会显示每行的工具提示。事情是这样的，但对于多行。

我发现这个StackOverflow答案（它包括一个JSFiddle），但我似乎无法使它与我的多重系列折线图一起工作。

svg.append("path") // this is the black vertical line to follow mouse
  .attr("class","mouseLine")  
  .style("stroke","black")
  .style("stroke-width", "1px")
  .style("opacity", "0");var mouseCircle = causation.append("g") // for each line, add group to hold text and circle
      .attr("class","mouseCircle"); mouseCircle.append("circle") // add a circle to follow along path
  .attr("r", 7)
  .style("stroke", function(d) { console.log(d); return color(d.key); })
  .style("fill","none")
  .style("stroke-width", "1px"); mouseCircle.append("text")
  .attr("transform", "translate(10,3)"); // text to hold coordinatesvar bisect = d3.bisector(function(d) 
  .attr('width', width) // can't catch mouse events on a g element
  .attr('height', height)
  .attr('fill', 'none')
  .attr('pointer-events', 'all')
  .on('mouseout', function(){ // on mouse out hide line, circles and text
        d3.select(".mouseLine")
            .style("opacity", "0");
        d3.selectAll(".mouseCircle circle")
            .style("opacity", "0");
      d3.selectAll(".mouseCircle text")
            .style("opacity", "0");
  })
  .on('mouseover', function(){ // on mouse in show line, circles and text
        d3.select(".mouseLine")
            .style("opacity", "1");
         d3.selectAll(".mouseCircle circle")
            .style("opacity", "1");
        d3.selectAll(".mouseCircle text")
            .style("opacity", "1");
  })
  });

所以，简单地说，我想将我的折线图JSFiddle与这个工具提示JSFiddle结合起来。有人知道怎么做这个吗？或者是否有更简单的方法来创建这样的工具提示？任何帮助表示赞赏！