ElementRef смещение всегда 0 - PullRequest
Новая
       18

ElementRef смещение всегда 0

0 голосов
/ 14 января 2019

Я имею дело с проблемой, мне нужно получить ширину и высоту контейнера элемента, чтобы правильно отобразить svg внутри. Дело в том, что OffsetWidth и Height всегда равны 0, и я не знаю, что мне не хватает.

Родительский компонент: 

<div nz-row [nzGutter]="16">
    <div nz-col nzSpan="24">
        <nz-card nzHoverable>
            <nz-range-picker [ngModel]="initialRange" (ngModelChange)="onChange($event)" nzShowTime nzFormat="MM/dd/yyyy HH:mm:ss"></nz-range-picker>
            <bar-chart [data]="data"></bar-chart>
        </nz-card>
    </div>
</div>

компонент гистограммы: 

<div #chart class="chart-container"></div>

гистограмма css: 

.chart-container {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
}

.chart-svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
}

машинописная гистограмма: 

@Component({
    selector: 'bar-chart',
    templateUrl: './bar-chart.component.html',
    encapsulation: ViewEncapsulation.None,
    styleUrls: ['./bar-chart.component.scss']
})
export class BarChartComponent extends BaseChart implements OnInit {
   @ViewChild('chart')
    private chartContainer: ElementRef;
    @Input()
    public data: DataModel[];
    public margin = { top: 20, right: 20, bottom: 30, left: 40 };

    constructor() {
        super();
    }
    public ngOnInit() {
        if (!this.data) {
            return;
        }

        this.draw();
    }

    private draw(): void {
        d3.select('svg').remove();

        const element = this.chartContainer.nativeElement;
        const data = this.data;

        const svg = d3.select(element).append('svg')
            .attr('class', 'chart-svg')
            .attr('width', element.offsetWidth)
            .attr('height', element.offsetHeight);

        const contentWidth = element.offsetWidth - this.margin.left - this.margin.right;
        const contentHeight = element.offsetHeight - this.margin.top - this.margin.bottom;
    }
}

Я использую ng-zorro-antd для дизайна пользовательского интерфейса с углом 7.

...