Javascript 更新横轴上的D3多行图表

我正在尝试绘制一个多行d3图表。我已经创建了一个方法，它应该获取一个新的数据集，并尝试在相同的d3帧中绘制它，以进行新的数据更新更改（可能是过滤器）

第一个绘图工作正常，但下一个绘图（模拟数据：前一个数据的一部分和少数操纵值）未显示正确，并与x轴相交

[见下图]

此外，起始原点缺少一个勾号，在本例中，该勾号也应为2010

如果将来有更多的动态数据点，我还想再创建几行。当前模型为{date，actual，projected}，更期望的是平均值或差值，仅在触发器上显示

任何帮助都将不胜感激

这是一场闪电战

参考资料：

动画折线图：

多行图表：

数据集更新：

---

---

请在堆栈溢出处保留每个问题一个问题。这个答案将处理第1题，考虑对其他问题提出单独的问题。< /P> 这里的问题只是您的输入/更新方法，这是不正确的。坚持使用惯用的D3，大致如下：

const update =  this.svg.selectAll('.records')
    .data(records);

const enter = update.enter().append('g')
    .attr('class', 'records'); 

然后，使用

enter

追加新路径，并使用

update

更新这些路径

您还可以放弃组，直接为路径创建输入/更新/退出选择。这将使您的代码更简单

---

这是分叉代码：

谢谢。d3文档很好，但提供的示例主要针对版本3，现在使用v5。但我会找到答案的。有什么建议吗？好吧，如果您访问API，那么提供的所有示例都是针对v5的。