Javascript 在d3.js多折线图问题上应用工具提示

我正在尝试使用给定数据创建d3多折线图

我还想在悬停时实现一个工具提示，显示交点处的线数据。

我的工具提示代码：

var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
            console.log(d);
            return "<strong>Frequency:</strong> <span style='color:red'>" + d + "</span>";
        });

var tip=d3.tip（）
.attr（'class'，'d3 tip'）
.偏移量（[-10,0]）
.html（函数（d）{
控制台日志（d）；
返回“频率：”+d+”；
});

我的问题：

var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
            console.log(d);
            return "<strong>Frequency:</strong> <span style='color:red'>" + d + "</span>";
        });

1） 目前它的显示未定义的，应该显示数据

2） 它应该显示在十字路口。

我如何着手实现这一目标

这是

以下是我想要实现的目标：

var tip = d3.tip()
        .attr('class', 'd3-tip')
        .offset([-10, 0])
        .html(function(d) {
            console.log(d);
            return "<strong>Frequency:</strong> <span style='color:red'>" + d + "</span>";
        });

---

你看到了吗？@Larskothoff Hey thanx就是一个例子。我理解创建一个以交点为中心的圆的逻辑。但是我不能解决这个未定义的问题。你使用的是完全不同的方法。特别是，您没有将数据绑定到DOM元素——这就是未定义的原因。此外，还需要将圆添加为单独的元素；将工具提示附加到线条上不起作用。@Larskothoff我已经更新了小提琴，在交点代码上有一个圆圈。但我似乎无法正确绑定数据。您根本没有将数据绑定到行。您需要使用常用的D3

。为此，请选择All（..）.data（..）

模式。