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

【问题标题】：Issue with tooltip on d3 line chartd3 折线图上的工具提示问题
【发布时间】：2017-06-06 06:37:49
【问题描述】：

所以我正在尝试使用 Mark 的答案/示例从这里 Multiseries line chart with mouseover tooltip 为我的折线图实现一个工具提示

当我将鼠标悬停在我的数据点上时，我能够显示工具提示行，但是我在假设我的 x.invert 函数时被错误阻止。

Uncaught ReferenceError: x is not defined

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

这是我在 jsfiddle 中的完整代码，在此先感谢。

https://jsfiddle.net/zos5jfzp/

【问题讨论】：

您可能希望缩短代码。现在很难浏览它。

标签： javascript jquery d3.js

【解决方案1】：

你的代码有一些错误：

Uncaught ReferenceError: x is not defined 来自您将秤命名为xScale 而不是x

y 规模也有同样的问题，将其重命名为 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');

和

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

最后，你必须改变

idx = bisect(d.Count, xDate);

到

idx = bisect(d.values, xDate);

这是更新后的小提琴：https://jsfiddle.net/zos5jfzp/1/

【讨论】：