d3.select вызывает «ошибка ссылки: документ не определен» в файле server.js в Angular Universal

Question

Я пытаюсь создать проект Angular с рендерингом на стороне сервера, который создает диаграммы D3.Диаграммы находятся в их собственных компонентах, например, line-chart - это папка с файлами ts, spec.ts, html и css для создания линейной диаграммы.D3 установлен, и html для компонента представляет собой пару тегов svg с идентификатором для легкого выбора.Тем не менее, выбор приводит к «ReferenceError: документ не определен» в

?new _selection_index__WEBPACK_IMPORTED_MODULE_0 __ ["Selection"] ([[document.querySelector (selector)]], [document.documentElement])

Для записи приведен минимальный код TypeScript, который создает эту ошибку.Как мне это исправить?

import { Component, OnInit } from '@angular/core';
import * as d3 from "d3";

var svg = d3.select("#canvas");

@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

Вы можете получить ссылку на свой svg, например:

@Component({
  selector: 'app-line-chart',
  template: '<div class="chart" #chart></div>',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {

  @ViewChild('chart') private chartContainer: ElementRef;

  constructor() { }

  ngOnInit() {
      const element = this.chartContainer.nativeElement;
      let svg = d3.select(element)
  }

}

(Вы можете оставить свой HTML в отдельном файле, я просто поместил его здесь для ясности)