Javascript 如何向D3折线图添加交互功能（线条和标签）？

我不熟悉

D3.js

，目前正在为我的一个项目开发

折线图。我参考了文档和示例并创建了自己的版本。
现在，我计划在这里添加两个交互式功能：

在图表的鼠标上方绘制一条到最近数据点的垂直线
在此垂直线旁边显示具有X和Y属性的标签
要使此功能更清晰，请参阅此

以下是我从一个建议中尝试的内容：

svg.append("g")        // creating new 'group' element
.selectAll('rect')     // adding a rectangle for the label
.selectAll('line');    // adding a line

但是，直线和矩形不会显示。我在谷歌上搜索了很多次，但没有白费。我错过了什么



对于标签，下面是一个有用的示例：（来自）

对于使用鼠标坐标，您可以执行以下操作：

var coordinates = [0, 0];
coordinates = d3.mouse(this);
var x = coordinates[0];
var y = coordinates[1];

（from）
你看到了吗？@LarsKotthoff:谢谢你的建议，但我仅限于使用D3库。使用.selectAll（'rect'）和.selectAll（'line'）可以选择你刚刚创建的'g'元素中的所有矩形和线条，该元素为空。这就是为什么你不能让那些元素出现。但是你还需要花更多的时间来创建自己的简单图表，以便清楚地了解选择是如何工作的（或者不工作的）。
var coordinates = [0, 0];
coordinates = d3.mouse(this);
var x = coordinates[0];
var y = coordinates[1];