Javascript D3V5中更新路径的平滑转换

我正在尝试构建一个d3折线图，它会在每次单击时更新图表数据。 以下是我目前的进展：

var n=10，
random=d3.randomNormal（0.2），
数据=d3.范围（n）.地图（随机）；
var svg=d3。选择（“svg”），
保证金={
前20名，
右:20,，
底数：20，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
var x=d3.scaleLinear（）
.domain（[0，n-1]）
.范围（[0，宽度]）；
变量y=d3.scaleLinear（）
.domain（[-1，1]）
.范围（[高度，0]）；
var line=d3.line（）
.x（功能（d，i）{
返回x（i）；
})
.y（功能（d，i）{
返回y（d）；
});
g、 附加（“defs”）。附加（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）、+y（0）+”）
.call（d3.axisBottom（x））；
g、 附加（“g”）
.attr（“类”、“轴--y”）
.调用（d3.左（y））；
g、 附加（“g”）
.attr（“剪辑路径”、“url（#剪辑）”）
.append（“路径”）
.基准（数据）
.attr（“类”、“行”）
.attr（'d'，行）
函数tick（）{
//将新数据点推到后面。
data.push（random（））；
//重新画线。
d3.选择（“.行”）
.attr（“d”，行）
.attr（“转换”，null）
.transition（）
.持续时间（300）
//把它滑到左边。
d3.选择（“.行”）
.attr（“转换”、“平移”（+x（-1）+”，0）”
.transition（）
.持续时间（300）
//将旧数据点从前面弹出。
data.shift（）；
}
d3.选择（“翻译”）
。单击（“单击”，勾选）

.line{
填充：无；
行程：#000；
笔划宽度：1.5px；
}

翻译

您没有转换任何内容：

d3.select(".line")
  .attr("...")
  .transition()
  .duration()

这并没有指定您正在转换任何内容。前两行返回选择，后两行返回转换-您需要在转换上使用.attr（）来实际转换某些内容。如果在选择上使用.attr（），它只会更新该属性。因此，您需要使用以下模式：

d3.select(".line")
  .transition()
  .duration()
  .attr("...")  // attribute to be transitioned

或：

此外，您不需要两次转换，添加新数据，然后移动图形：

// Redraw the line.
d3.select(".line")
  .attr("d", line)
  .attr("transform", null)
  .transition()
  .attr("transform", "translate(" + x(-1) + ",0)")
  .duration(300)

片段：

var n=10，
random=d3.randomNormal（0.2），
数据=d3.范围（n）.地图（随机）；
var svg=d3。选择（“svg”），
保证金={
前20名，
右:20,，
底数：20，
左：40
},
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
g=svg.append（“g”）.attr（“transform”、“translate”（+margin.left+）、“+margin.top+”）；
var x=d3.scaleLinear（）
.domain（[0，n-1]）
.范围（[0，宽度]）；
变量y=d3.scaleLinear（）
.domain（[-1，1]）
.范围（[高度，0]）；
var line=d3.line（）
.x（功能（d，i）{
返回x（i）；
})
.y（功能（d，i）{
返回y（d）；
});
g、 附加（“defs”）。附加（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
g、 附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）、+y（0）+”）
.call（d3.axisBottom（x））；
g、 附加（“g”）
.attr（“类”、“轴--y”）
.调用（d3.左（y））；
g、 附加（“g”）
.attr（“剪辑路径”、“url（#剪辑）”）
.append（“路径”）
.基准（数据）
.attr（“类”、“行”）
.attr（'d'，行）
函数tick（）{
//将新数据点推到后面。
data.push（random（））；
//重新画线。
d3.选择（“.行”）
.attr（“d”，行）
.attr（“转换”，null）
.transition（）
.attr（“转换”、“平移”（+x（-1）+”，0）”
.持续时间（300）
//将旧数据点从前面弹出。
data.shift（）；
}
d3.选择（“翻译”）
。单击（“单击”，勾选）

.line{
填充：无；
行程：#000；
笔划宽度：1.5px；
}

翻译

// Redraw the line.
d3.select(".line")
  .attr("d", line)
  .attr("transform", null)
  .transition()
  .attr("transform", "translate(" + x(-1) + ",0)")
  .duration(300)