Question

我有一个演示here

这是一张D3斜角图表。

调整窗口大小时，图表将调整大小，使用调整大小时捕获的窗口宽度重新调整图表

@HostListener('window:resize')
    onWindowResize() {

    this.w = this.elementView.nativeElement.offsetWidth;
    this.width = this.w - this.margin.left - this.margin.right;

    d3.selectAll('.bar-opacity').remove()

    this.initScales();
    this.drawUpdate(this.data);
}

页面第一次加载时我没有宽度，因为在调整窗口大小时会发生这种情况。

页面加载时svg没有宽度

页面首次加载时，如何捕获svg容器的宽度

Answer 1

只需将宽度计算作为ngOnInit ...的第一行...

ngOnInit() {
  this.w = this.elementView.nativeElement.offsetWidth;
  this.width = this.w - this.margin.left - this.margin.right;
  ...

...似乎可以固定页面加载宽度。

很显然，您可能想将这些计算分解为自己的方法，因为它们在多个地方都被使用。（干）。

Answer 2

您可能会遇到问题，因为尚未绘制视图，请尝试将逻辑移至AfterViewInit界面，只有在视图可用时才会触发此界面。这似乎在提供的演示中有效。

export class StackedChartComponent implements AfterViewInit {

  public ngAfterViewInit(): void
  {
      this.w = this.elementView.nativeElement.offsetWidth;
      this.width = this.w - this.margin.left - this.margin.right;

      this.initScales();
      this.initSvg();
      this.drawUpdate(this.data);

      console.log(this.width);
  }
}

Angular / SVG-捕获页面加载时的元素宽度

2 个答案: