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