Question

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

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

Uncaught ReferenceError: x is not defined

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

in my Here是我在jsfiddle的完整代码，提前谢谢。

https://jsfiddle.net/zos5jfzp/

Answer 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/

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

1 个答案: