错误无法在 d3-甘特图中读取 null 的属性“getBoundingClientRect”答案

【问题标题】：Error Cannot read property 'getBoundingClientRect' of null in d3-gantt charts错误无法在 d3-甘特图中读取 null 的属性“getBoundingClientRect”
【发布时间】：2019-05-28 08:52:59
【问题描述】：

大家好，当我尝试创建时间线图表时出现以下错误。我同时导入了 d3 和 d3-timeline

import * as d3timelines from 'd3-timelines';
import * as d3 from 'd3';
export class DashboardThreadedComponent implements OnInit {
 private data: any = [
        {label: 'person a', times: [
            {starting_time: 1355752800000, ending_time: 1355759900000},
            {starting_time: 1355767900000, ending_time: 1355774400000}]},
        {label: 'person b', times: [
            {starting_time: 1355759910000, ending_time: 1355761900000}]},
        {label: 'person c', times: [
            {starting_time: 1355761910000, ending_time: 1355763910000}]},
        ];

private chart: any;
 constructor(
        private cookieService: CookieService,
        private modalService: NgbModal,
        private bpeService: BPEService,
        private userService: UserService,
        private router: Router,
        private route: ActivatedRoute,
        public appComponent: AppComponent
  ) {}

    ngOnInit() {

        this.chart = d3timelines.timelines();

        d3.select('.timeline').append('svg').attr('width', 500)
        .datum(this.data).call(this.chart);

    }
}
}

但出现以下错误

ERROR TypeError: Cannot read property 'getBoundingClientRect' of null

这里的任何人都可以帮助解决它。非常感谢

【问题讨论】：

标签： javascript angular d3.js angular6

【解决方案1】：

时间轴元素可能尚未在 ngOnInit 中完全创建

要检查是否是这种情况，请尝试：

setTimeout(() => {

        this.chart = d3timelines.timelines();

        d3.select('.timeline').append('svg').attr('width', 500)
        .datum(this.data).call(this.chart);

},1000)

【讨论】：