Angular D3: Как изменить размер окна просмотра SVG

Question

Речь идет не о resposiveness. Речь идет о реактивных диаграммах.

Я реализовал метод ngOnChanges для обновления диаграммы при изменении источника данных:

ngOnChanges(changes: SimpleChanges) {
  if (changes.data) {
    this.createChart(changes.data.currentValue);
  }
}

Он работает как шарм, за исключением ... диаграммы heigth должно быть динамическим c, я имею в виду, увеличивается или уменьшается в зависимости от changes.data.length (больше данных, больше строк для рендеринга). Я не ограничиваю размер элемента svg в элементе контейнера.

Вот как я построил элемент <svg> root:

const viewBoxHeight = data.length * 24 + 40;
const viewBoxWidth = 800;
if (this.svg) {
  this.svg.select('svg')
    .attr('viewBox', '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight);
} else {
  this.svg = d3.select(this.hostElement)
    .append('svg')
    .attr('width', '100%')
    .attr('height', '100%')
    .attr('viewBox', '0 0 ' + viewBoxWidth + ' ' + viewBoxHeight);
}

Если объект this.svg не существует, он создается, в противном случае высота должно быть изменено.

Проблема в том, что он не работает, высота не меняется. Я вручную изменил свойство viewBox в коде html с помощью Chrome Developer Tools, и оно изменило высоту (работает).

Я что-то упустил?

PS .: Я гуглил об этом и только о проблемах отзывчивости

Answer 1

Копаясь в этом, я в конечном счете нашел проблему:

    const.viewBoxHeight = data.length * 24 + 40;
    const viewBoxWidth = 800;
    if (this.svg) {
      d3.select(this.hostElement)
        .select('svg')
        .attr('viewBox', '0 0 ' + viewBoxWidth + ' ' + this.viewBoxHeight);
    } else {
      this.svg = d3.select(this.hostElement)
        .append('svg')
        .attr('width', '100%')
        .attr('height', '100%')
        .attr('viewBox', '0 0 ' + viewBoxWidth + ' ' + this.viewBoxHeight)

    }

Это должно выбрать this.hostElement вместо 'svg', как я первоначально сделал.