zlodiak

ракета пролетела всю длину экрана и вышла за пределы экрана(тут мой скрипт при помощи splice удаляет ракету из массива ракет)

Не удаляет. Нет у вас там кода, который такое делает. Есть код отвечающий за перемещение - с проверкой достижения границы экрана, и никакой ветки else, в которой и должно происходить удаление, там нет. Есть удаление ракеты при столкновении с кораблём. Удаления при выходе за границы экрана нет. Нет его. НЕ-ТУ.

А уж splice внутри forEach - за такое не грех и руки оборвать.

Проверяем, не вышла ли ракета за границы элемента (левую сравниваем с горизонтальной координатой, правую с суммой горизонтальной координаты и ширины), если да - удаляем, нет - двигаем:

this.rockets.length -= this.rockets.reduce((acc, n, i, a) => {
  a[i - acc] = n;

  if (n.type === 'right' && this._isCollideFlyLeft(n)) {
    this.flyLeft.energy -= 10;
  } else if (n.type === 'left' && this._isCollideFlyRight(n)) {
    this.flyRight.energy -= 10;
  } else if (0 < n.xCoord && n.xCoord + n.width < this.fieldEl.offsetWidth) {
    n.move();
    return acc;
  }

  return acc + 1;
}, 0);

на Javascript.ru хорошее объяснение

Про это есть отличный ресурс:
https://0.30000000000000004.com/

Если коротко: это не проблема js, это процессоры наши так считают.

Тут дело не в контексте, а в том что вы смешиваете синхронный код (цикл for) и асинхронный setTimeout (даже если вы поставите 0 секунд, это не сделает его синхронным, это всего лишь значит что будет использовано минимально возможное время, близкое к 0).

Именно по этому вначале цикл выполнится 50 раз, и переменная count будет равной 50. И тоолько потом, через какое-то минимльное время, запустится 50 таймаутов и конечно каждый из них выведет 50 в консоль.

Неправильно считается Y центра кружочка. Вместо

.attr('cy', d => (height + paddings.top - xScale(d[1])))

Должно быть
.attr('cy', d => yScale(d[1]))

Всё верно. Какие сомнения?

То есть если пользователь кликнул три раза по первой кнопке, то дочерний компонент значение "4" вывел только один раз.

А если кликнул по первой, потом по второй, а потом снова по первой? Что должно быть выведено в консоль? Если 4-2-4, тогда используйте ngOnChanges для вывода значений. Если 4-2-ничего - добавьте в дочерний компонент массив, куда будете складывать выводимые значения, и перед выводом проверяйте, есть ли там то, что собираетесь отправить в консоль.

const data = [
  { title: 'a', value:   0 },
  { title: 'b', value: 100 },
  { title: 'c', value: 200 },
];

d3.select('#svg')
  .selectAll('g')
  .data(data)
  .enter()
  .append('g')
  .append('rect')
  .attr('x', d => d.value)
  .attr('y', d => d.value)
  .attr('width', 50)
  .attr('height', 50)
  .attr('fill', '#F0A');

Надо указать пространство имён, к которому относится добавляемый элемент.

Т.е., вместо append('div') должно быть append('xhtml:div').

Если захотите добавить внутрь div'а ещё что-то - указывать пространство имён уже не нужно, по умолчанию оно наследуется от родительского элемента.

Для ангуляра требуется верно указывать имя свойства с большой буквой.
"viewBox"

Если открыть раздел спецификации SVG посвящённый фигурам, то нетрудно будет увидеть, что среди элементов, которые могут являться контентом фигур, сами фигуры отсутствуют. Нельзя вкладывать одну фигуру в другую.

В принципе SVG вписывается в контейнер, достаточно задать тому ширину, а элементу svg указать viewbox.

Один глюк, который не понимаю. Если viewbox задать программно, как у вас в фиддле, через .attr('viewbox', '0 0 1200 250') – svg не становится «живым». Зато если через инструменты разработчика иму изменить параметр viewbox, например, вместо 1200 поставить 1201, все оживает: график вписывается в ширину и меняется при изменении окна.

Глюк исправляется, если не создавать программно SVG и атрибут, а прописать их сразу в HTML.
Рабочий fiddle.

Если я правильно понял что вам нужно, то вместо seriesTooltipTemplate надо было передавать tooltipTemplate, типа так.

есть пример локализации, но он по структуре элементов не похож на мой пример поэтому у меня не получается им воспользоваться

Даже и не знаю, что сказать. Использовал этот пример как он есть (ну, почти - добавил пару свойств, dayTemplate передаётся из родителя, а обратно эмитится выбранная дата) - всё получилось.

Но если я создам файл webpack.config.js и заполню одну из секций(например Output), то будет ли это означать, что Output будет браться из webpack.config.js, а остальные значения из того же неведомого конфига?

Нет. Могу посоветовать для этих целей (если настроек в angular.json не хватает) https://www.npmjs.com/package/ngw

Во-первых - вы явно путаете ширину с высотой. Во-вторых - [attr.viewBox]="'0 0 100 ' + bla".

<svg [attr.viewBox]="'0 0 100 ' + bla">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg>