如何在Angular 2中正確地重用D3.js組件？

Question

我想重用角2

@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組件但是，您可以在這個演示中看到，兩個矩形不能表現出很好的一起。

如何正確重用這些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。