更新十字线上的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

请在此处将每个问题仅保留一个问题。该答案将解决问题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