在javascript中呈现圆时出现的问题

我试图让工具提示像：对于我的图形，这是我的实时图形的结果：我想知道为什么圆和图形之间有一个间隙，为什么在开始时有一条垂直的圆线？当它开始时，圆圈接近曲线，但突然它们开始上下跳跃！！我想让这些圆平稳地移动并粘在曲线的表面上。我认为问题在于它们没有随着“路径1”移动，因此它无法识别圆，这就是它们单独移动的原因，或者工具提示的值与曲线的值不同，因此它们不会重叠！。这就是数据的生成方式（值和时间）和工具提示：

var data1=初始化（）；
var data1s=data1；
函数初始化（）{
var-arr=[]；
对于（变量i=0；i”+d.value）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY-28）+“px”）；
})
.on（“mouseout”，函数（d，i）{
过渡部（）
.持续时间（650）
.样式（“不透明度”，0）；
});
blueCircles.data（数据1s）
.transition（）
.持续时间（650）
.attr（“cx”，函数（d）{返回x（d.time）；}）
.attr（“cy”，函数（d）{返回y（d.value）；}）；

请告诉我您的意见，因为我确实需要它：( 正如我所说，也许我应该在“路径”中添加“鼠标覆盖和鼠标移动功能”，以使其能够识别工具提示。类似于以下内容。但我也不是很确定：(

var path1=svg.append（“g”）
.attr（“剪辑路径”、“url（#剪辑）”）
.append（“路径”）
.data（[data1]）
.attr（“类别”、“第1行”）
.on（“鼠标悬停”，鼠标悬停）
.on（“mousemove”，mousemove）
.on（“mouseout”，mouseout）；

我认为您的问题在于路径的插值。您将

var区域上的点之间的插值设置为“基”，这是一种B样条插值。这意味着绘制的区域不会穿过数据集中的点，如本例所示：

不过，点移动的路径只是数据集中点之间的直线。我更新了插值，并将插值从基本更改为线性，以证明它会以这种方式工作。我还将移动的ease（）设置为线性，这使其不那么“跳跃”。
非常感谢您的回答：）它移动得更好，但是当圆到达图形的左侧（末端）时，它们开始移动，而不是在直线上。顺便问一下，有没有办法在图形开始时绘制圆的垂直线？因为我希望它们被放置在曲线上，但它们是从图形的左侧到右侧。