Многострочный график D3 по обновлению пересекает ось

Question

Я пытаюсь построить многострочный график d3. Я создал метод, который должен взять новый набор данных и попытаться отобразить его в том же кадре d3 для новых изменений обновления данных (возможно, фильтров).

1. Первый розыгрыш работает нормально, но следующий розыгрыш (проверенные данные: фрагмент предыдущих данных и несколько манипулируемых значений), который не отображается правильно, пересекает ось X.

   [См. Изображение ниже]

2. Также в исходном источнике отсутствует тик, который также должен быть 2010 в этом примере

3. I также хотите создать еще несколько строк, если в будущем будет больше точек данных, которые должны быть динамическими c. Текущая модель: {дата, факт, прогноз}, Больше ожидаемое значение - среднее значение или разница, которая будет отображаться только при срабатывании.

Любая помощь приветствуется.

Вот 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, рассмотрите возможность задать отдельные вопросы для других проблем.

Проблема здесь заключается только в вашей методологии ввода / обновления, которая неверна и. Придерживайтесь идиоматизма c 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