javascript - d3.select() 为 中的 html 元素返回 null

Question

我有一个包含 < svg > 元素的 View < ng-template>

<div *ngIf="data == undefined; else elseBlock">
   Sorry no data!
</div>
<ng-template #elseBlock>
   <svg id="areachart" width="100%" height="210"></svg>
</ng-template>

使用 d3，我试图读取 svg 元素的宽度(baseValue)，但 d3.select('#areachart') 在代码中返回 null:

export class DrawAreaChart implements AfterViewInit {

    private data;

    constructor(){}

    ngAfterViewInit() {
       this.chartService.getData().subscribe(
           (result) => {
               if (result) {
                  this.data = result;

                  var svg = d3.select("#areachart"),
                  width = +svg.property("width").baseVal.value, /* The code fails here */
                  height = +svg.property("height").baseVal.value;

                  ....
                  ....
               }
           }
       );
    }
    ....
    ....
    ....
}

它抛出错误说-

Cannot read property 'width' of null

请帮忙。

Answer 1

data 最初为 null，但在 this.data = result 之后 Angular 在 d3 尝试选择之前没有时间调整 DOM(因此有效的 svg 仍然不是在框架中)。

您可以在 ngOnChanges 上运行 d3 代码

ngOnChanges(changes: SimpleChanges) {
  if(changes.data) {
    // d3 code here
  }
}

或者可能在 svg div 上使用 [hidden]="!data"(尽管对此有一些注意事项，请参阅 What is the equivalent of ngShow and ngHide in Angular2 )。