D3.js，DC.js工具提示-网格线问题

Question

我在序列图renderlet中使用以下代码来获取D3工具提示。

  lines.on('renderlet', function(chart) {
    chart.selectAll('g.x text')
      .attr('transform', 'translate(-29,30) rotate(315)')
    chart.selectAll('circle')
      .on("mouseover", function(d) {
        d3.select(this)
          .transition()
          .duration(500)
        div.transition()
          .duration(200)
          .style("opacity", 0.9);
        div.html("<table><thead><tr><th colspan='2' class='toolHead'>" + d.data.key[1] +
            '</th></tr></thead><tbody>' + '<tr style="margin-top: 100px"><td class="toolHeadCol"><td colspan="2">' +
            d.data.key[0] + '</td></tr>' + '<tr style="margin-top: 100px"><td class="toolHeadCol"><b>' + 'value: ' +
            '</b></td> <td>' + d.y + '</td></tr></tbody></table>')
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function() {
        d3.select(this)
          .transition()
          .duration(500)
          .style('opacity', 0)
        div.transition()
          .duration(500)
          .style("opacity", 0)
      })

将鼠标悬停在某个数据点上时，将显示工具提示。线（圆）上的数据点按预期方式工作，但是相应的水平和垂直网格线存在一些问题。

1. 它们不会在鼠标移开后消失，而是会停留在另一个圆圈上。
2. 由于它是系列图，因此有多条线，并且一条线上的数据点的鼠标悬停似乎不受另一条线上的鼠标悬停的影响。如下图所示：

如图所示，即使将蓝色网格线悬停在橙色线上，该网格线仍然可见。

如何解决这些问题？

Here is the fiddle