如何在 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 。