时间戳

首页 > 解决方案 > Angular/SVG - 在页面加载时捕获元素宽度

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

问题描述

我在这里有一个演示

这是一个角度的 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 容器的宽度

标签： angulard3.jssvg

解决方案

简单地将宽度计算作为ngOnInit...的第一行

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

...似乎修复了页面加载的宽度。

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

推荐阅读