如何在Angular 2中正确重用D3.js组件？

Question

我想在Angular 2中重用这个D3.js组件。

@Component({
  selector: 'child-cmp',
  template: `
    <div>
      <svg class="chart"></svg>
    </div>
  `
})
export class ChildCmp {
  ngOnInit() {
    let chart = d3.select(".chart")
      .append("g")
      .append("rect")
        .attr("width", 50)
        .attr("height", 100);
  }
}

http://plnkr.co/edit/PnJfFJ7sOZIxehs2LHNh?p=preview

但是，你可以在这个演示中看到，两个矩形不能很好地显示出来。

如何正确重用这些D3.js组件？感谢

Answer 1

我会尝试这样的事情：

@Component({
  selector: 'child-cmp',
  template: `
    <div>
      <svg class="chart"></svg>
    </div>
  `
})
export class ChildCmp {
  constructor(private eltRef:ElementRef) {}

  ngAfterViewInit() {
    let chart = d3.select(this.eltRef.nativeElement)
      .select('.chart')
      .append("g")
      .append("rect")
        .attr("width", 50)
        .attr("height", 100);
  }
}

请参阅此plunkr：http://plnkr.co/edit/lqFGoEvnvGw4PvCs8OWg?p=preview。