Javascript 移动折线图上的圆

想在我的实时折线图上画圆圈。图表在每次迭代时生成随机y值，并将其绘制在图表上，从而移动域。这是我的密码-

const svg=d3.select（'svg'）；
常量边距={TOP:50，BOTTOM:50，LEFT:50，RIGHT:50}；
const WIDTH=svg.attr（'WIDTH'）-MARGIN.LEFT-MARGIN.RIGHT；
const HEIGHT=svg.attr（'HEIGHT'）-MARGIN.TOP-MARGIN.BOTTOM；
常数限值=60；
常数持续时间=500；
让dataList=[]；
设g=svg.append（'g'）.attr（'transform'，'translate（${MARGIN.LEFT}，${MARGIN.TOP}）`）；
g、 append（'defs'）。append（'clipPath'））
.attr（'id'，'clip2'）
.append（'rect'）
.attr（'x'，0）
.attr（'y'，0）
.attr（'width'，width）
.attr（'高度'），高度；
//解析时间
常量时间刻度=d3.scaleTime（）
.范围（[0，宽度]）；
const valueScale=d3.scaleLinear（）
.domain（[0,10]）
.范围（[高度，0]）；
常量行=d3.line（）
.曲线（d3.曲线基）
.x（（d）=>时间刻度（d.time））
.y（（d）=>值刻度（d值））；
常数xAxis=d3.axisBottom（时间刻度）；
const axisCall=g.append（'g'）
.attr（'transform'，'translate（0，${HEIGHT}）`）；
调用（xAxis）；
g、 附加（'g'）
.attr（'class'，'axis--y'）
.调用（d3.axisLeft（valueScale））
设pathsG=g.append（'g'）.attr（'id'，'paths'）.attr（'class'，'paths'）.attr（'clip-path'，'url（#clip2））；
函数updateChart（）{
让现在=Date.now（）；
dataList.push({
时代周刊:现在,，
值：Math.floor（Math.random（）*10）
});
//移位域
timeScale.domain（[现在-（（限制-2）*持续时间），现在-持续时间]；
axisCall.transition（）.duration（duration）.ease（d3.easeLinear，2.call）（xAxis）；
让minerG=pathsG.selectAll（'.minerLine'）.data（[dataList]）；
让minerGEnter=minerG.enter（）
.append（'g'）
.attr（'class'，'minerLine'）
.合并（矿业）；
让minerSVG=minerGEnter.selectAll（'path'）。数据（函数（d）{
返回[d]；
});
让minerSVGenter=minerSVG.enter（）
.append（'path'）.attr（'class'，'line'））
.style（'笔划'，'#D073BA'）
.style（'填充'，'无'）
.merge（SVG）
.transition（）
.持续时间（持续时间）
.ease（d3.easeLinear，2）
.attr（'d'，行（数据列表））
.attr（'transform'，null）；
让圆=minerGEnter.selectAll（'circle'）/*.data（函数（d）{
返回[d]；
});*/
圆。数据（数据列表）
.输入（）
.append（'圆'）
.合并（圆）
.transition（）
.持续时间（持续时间）
.ease（d3.easeLinear，2）
.attr（'r'，5）
.attr（'cx'，（d，i）=>时间刻度（d.time））
.attr（'cy'，d=>valueScale（d.value））；
circles.exit（）.remove（）；
}
setInterval（函数（）{
//log（'hello'）；
updateChart（）；
}, 500);

实时折线图D3
圆圈的位置没有错，它们是正确的。它们可能看起来是错误的，因为您正在对路径使用插值器（
d3.curveBasis
），这会对路径进行修改：删除插值器可以清楚地说明这一点，如下面的演示所示。此外，关于转换，解决方案可能是在enter选择中设置圆的位置，并且只转换更新选择中的
x
位置

以下是仅包含这2项更改的代码：


const svg=d3.select（'svg'）；
常量边距={
前50名，
底数：50，
左:50,，
右：50
};
const WIDTH=svg.attr（'WIDTH'）-MARGIN.LEFT-MARGIN.RIGHT；
const HEIGHT=svg.attr（'HEIGHT'）-MARGIN.TOP-MARGIN.BOTTOM；
常数限值=60；
常数持续时间=500；
让dataList=[]；
设g=svg.append（'g'）.attr（'transform'，'translate（${MARGIN.LEFT}，${MARGIN.TOP}）`）；
g、 append（'defs'）。append（'clipPath'））
.attr（'id'，'clip2'）
.append（'rect'）
.attr（'x'，0）
.attr（'y'，0）
.attr（'width'，width）
.attr（'高度'），高度；
//解析时间
常量时间刻度=d3.scaleTime（）
.范围（[0，宽度]）；
const valueScale=d3.scaleLinear（）
.domain（[0,10]）
.范围（[高度，0]）；
常量行=d3.line（）
.x（（d）=>时间刻度（d.time））
.y（（d）=>值刻度（d值））；
常数xAxis=d3.axisBottom（时间刻度）；
const axisCall=g.append（'g'）
.attr（'transform'，'translate（0，${HEIGHT}）`）；
调用（xAxis）；
g、 附加（'g'）
.attr（'class'，'axis--y'）
.调用（d3.axisLeft（valueScale））
设pathsG=g.append（'g'）.attr（'id'，'paths'）.attr（'class'，'paths'）.attr（'clip-path'，'url（#clip2））；
函数updateChart（）{
让现在=Date.now（）；
dataList.push({
时代周刊:现在,，
值：Math.floor（Math.random（）*10）
});
//移位域
timeScale.domain（[现在-（（限制-2）*持续时间），现在-持续时间]；
axisCall.transition（）.duration（duration）.ease（d3.easeLinear，2.call）（xAxis）；
让minerG=pathsG.selectAll（'.minerLine'）.data（[dataList]）；
让minerGEnter=minerG.enter（）
.append（'g'）
.attr（'class'，'minerLine'）
.合并（矿业）；
让minerSVG=minerGEnter.selectAll（'path'）。数据（函数（d）{
返回[d]；
});
让minerSVGenter=minerSVG.enter（）
.append（'path'）.attr（'class'，'line'））
.style（'笔划'，'#D073BA'）
.style（'填充'，'无'）
.merge（SVG）
.transition（）
.持续时间（持续时间）
.ease（d3.easeLinear，2）
.attr（'d'，行（数据列表））
.attr（'transform'，null）；
让圆=minerGEnter.selectAll（'circle'）。数据（函数（d）{
返回d；
});
circles.exit（）.remove（）；
圆=圆。输入（）
.append（'圆'）
.attr（'r'，5）
.attr（'cx'，（d，i）=>时间刻度（d.time））
.attr（'cy'，d=>valueScale（d.value））
.合并（圆圈）；
圆。过渡（）
.持续时间（持续时间）
.ease（d3.easeLinear，2）
.attr（'cx'，（d，i）=>时间刻度（d.time））；
}
setInterval（函数（）{
//log（'hello'）；
updateChart（）；
}, 500);

实时折线图D3
Ahh非常感谢您的澄清。这样一个错误。