Javascript d3折线图上的工具提示问题

因此，我尝试使用Mark的答案/示例为我的折线图实现一个工具提示

当我将鼠标悬停在数据点上时，我可以看到工具提示行，但是我假设我的x.invert函数中有一个错误阻止了我

我已经检查了d3v4是否支持这一点，并研究了其他示例，但没有运气

下面是我在JSFIDLE中的完整代码，提前谢谢

---

您的代码中有一些错误：

Uncaught ReferenceError:x未定义

来自您命名的标尺

xScale

而非

x

您的

y

scale也有同样的问题，请将其重命名为

yScale

您尝试使用

line

上的查询选择器获取所有行，但未为行分配类

vis.append('svg:path')
    .attr('class', 'graph-line')
    .attr('d', lineGen(d.values))
    .style("stroke", function() {
        return d.color = color(d.key);
    })
    .attr('stroke-width', 2)
    .attr("id", 'tag' + d.key.replace(/[^\w]|_/g, ''))
    .attr('fill', 'none');

及

最后，你必须改变

idx = bisect(d.Count, xDate);

到

---

下面是更新后的fiddle:

您可能需要缩短代码。现在很难通过它导航。

var lines = document.getElementsByClassName('graph-line');

idx = bisect(d.Count, xDate);

idx = bisect(d.values, xDate);