更新交叉轴上的 D3 多线图

Question

我正在尝试绘制多线 d3 图表。我创建了一个方法，它应该采用一个新的数据集并尝试将它绘制在同一个 d3 框架中以进行新的数据更新更改（可能是过滤器）。

1. 第一次绘制工作正常，但下一次绘制（模拟数据：这是先前数据的一部分和少量操纵值）显示不正确，穿过 x 轴。

   [见下图]

2. 另外，起始原点缺少一个刻度，在本例中也应该是 2010 年

3. 如果将来有更多应该是动态的数据点，我还想再创建几行。当前模型是{日期、实际、预计}，更多预期是均值或差异，仅在触发时显示。

任何帮助将不胜感激。

这是 Stackblitz https://stackblitz.com/edit/angular-rhr39p

参考文献：

1. 动画折线图：http://bl.ocks.org/atmccann/8966400
2. 多线图：https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91
3. 数据集更新：https://bl.ocks.org/d3noob/7030f35b72de721622b8

---

Answer 1

请在 Stack Overflow 上为每个问题保留一个问题。此答案将处理问题 #1，请考虑针对其他问题提出单独的问题。

这里的问题只是您的输入/更新方法，这是不正确的。坚持使用惯用的 D3，它遵循以下思路：

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

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

然后，您使用 enter 附加新路径并使用 update 更新这些路径。

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

这里是分叉代码：https://stackblitz.com/edit/angular-lyd79t?file=src%2Fapp%2Flinechart%2Flinechart.component.ts