D3.js 在使用csv文件数据的d3散点图中，当鼠标位于某个点上时，如何绘制连接相关点的线？

我正在制作一个简单的散点图，我想在我的csv文件中使用除用于x轴和y轴的字段以外的其他两个字段，并在鼠标悬停在点上时用一条线将它们连接起来（如果它们相关）

---

我找遍了所有地方，找不到任何帮助，尤其是关于csv数据相关字段的帮助

这有很多可能的实现方式；这里有一个例子

给定以下csv值：

x,y,r,l
5,26,10,2
43,62,22,2
45,21,15,0
10,10,12,0

其中x和y是位置，r是半径，l是另一个要画线的点的索引

.酒吧{ 填充：钢蓝； } .bar:悬停{ 填充物：棕色； } .安讯士{ 字体：10px无衬线； } .轴线路径， .轴线{ 填充：无； 中风：000； 形状渲染：边缘清晰； } //标准d3绘图设置 var margin={顶部：20，右侧：20，底部：30，左侧：40}， 宽度=500-边距。左侧-边距。右侧， 高度=500-margin.top-margin.bottom； var x=d3.scale.linear .范围[0，宽度]； 变量y=d3.scale.linear .范围[高度，0]； var xAxis=d3.svg.axis scalex先生 .定向底部； var yAxis=d3.svg.axis 斯卡利先生 .orientleft； var svg=d3.selectbody.appendsvg .attrwidth，width+margin.left+margin.right .attrhight，height+margin.top+margin.bottom .附录 .attransform，translate+margin.left+，+margin.top+； var color=d3.scale.category10； //使用堆栈溢出代码编辑器进行注释 /* d3.csvdata.csv，功能正常{ 返回{ x:+d.x， y:+d.y， r:+d.r， l:+d.l } }，函数错误，数据错误{ */ //这将是从d3.csv返回的数据 VarData=[{x:5，y:26，r:10，l:2}，{x:43，y:62，r:22，l:2}，{x:45，y:21，r:15，l:0}，{x:10，y:10，r:12，l:0}]； //标准轴材料 x、 域[0，d3.maxdata，函数d{return d.x；}]； y、 域[0，d3.maxdata，函数d{return d.y；}]； svg.appendg .attrclass，x轴 .attrtransform，translate0，+高度+ .callxAxis； svg.appendg .属性类，y轴 卡利亚克斯先生 .附录文本 .attransform，旋转-90 .attry，6岁 .attrdy，.71em .styletext锚定，结束； //画一个点g var point=svg.selectAll.point .数据 进来 .附录 .类，点； //加圈 点圆 .attrcx，函数d{return xd.x；} .attrr，函数d{return d.r；} .attracy，函数d{return yd.y；} .stylefill，function，i{return colori；} //处理鼠标事件 //在这种情况下，我们将展示 //画到鼠标点的线 .onmouseover，函数d，i{ d3.选择All.lineTo+i .不透明度，1； } .在mouseout，function，i{ d3.选择All.lineTo+i .不透明度，0； } //添加线条并将“不透明度”设置为“不可见” 指向 .附录 .attrx1，函数d{return xd.x；} .attry1，函数d{return yd.y；} .attrx2，函数d{返回扩展数据[d.l].x；} .attry2，函数d{return ydata[d.l].y；} .attrclass，函数d{return lineTo+d.l；} .stylestroke，function，i{return colori；} .笔画宽度，2 .stylefill，无 .不透明度，0； //};

---

您需要获取要连接的点的坐标，并添加一个线元素来连接它们。