多D3圖表使用相同Angular2部件

Question

我有一個水平條形圖組件需要這將隨後由圖表庫horizontalBarChart一起使用的數據@input：

export class HorizontalBarChartComponent implements OnInit { 
    @Input() data: Object[]; 
    ngOnInit() { 
    horizontalBarChart.init({ 
     id: '#horizontal-bar-chart', 
     data: this.data 
    }); 
    } 
} 

內部horizontal-bar-chart.html：

<div id="horizontal-bar-chart"></div> 

而且d3選擇用於在圖表庫中的給定id：

const svg = d3.select(chartOptions.id) 
    .append('svg') 
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom); 

現在我想生成多個柱狀圖，每個不同的數據，在組件頁：

 <div> 
     <h6>Group</h6> 
     <app-horizontal-bar-chart [data]="data.chart1"</app-horizontal-bar-chart> 
     </div> 
     <div> 
     <h6>Ctp</h6> 
     <app-horizontal-bar-chart [data]="data.chart2"</app-horizontal-bar-chart> 
     </div> 

的問題是兩個圖表是第一部分的<div id="horizontal-bar-chart"></div>內部產生。

解決這種情況的最佳方法是什麼？

編輯：

我目前解決這個問題的方法是給每個圖表組件的div佔位符：

  <div> 
      <h6>Group</h6> 
      <div id="chart1"></div> // placeholder 
      <app-horizontal-bar-chart [id]="chart1" [data]="data.chart1"</app-horizontal-bar-chart> 
      </div> 
      <div> 
      <h6>Ctp</h6> 
      <div id="chart2"></div> // placeholder 
      <app-horizontal-bar-chart [id]="chart2"[data]="data.chart2"</app-horizontal-bar-chart> 
      </div> 

但是我不知道是否還有更多的是Angular2的解決這個問題的方法，可能使用ViewContainerRef什麼的。

Answer 1

如果這個想法只是創建一個可重用的d3圖表組件，您不需要一個Id。我已經實現了它以下列方式：

圖表組件：

@Component({ 
    selector: 'bar-chart', 
    template: ` 
    <svg width="300" height="200"></svg> 
    `, 
}) 
export class BarChart implements OnInit { 
    @Input() data: Array<any>; 

    constructor(private container: ElementRef) { 
    } 

    ngOnInit() { 
    this.initSvg(); 
    this.initAxis(); 
    this.drawAxis(); 
    this.drawBars(); 
    } 

    private initSvg() { 
    // This is how you can select the svg tag 
    // related to the current cumponent 
    this.svg = d3.select(this.container.nativeElement).select("svg"); 
    ... 
    } 

    ... 
} 

圖表消費者組件：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <bar-chart [data]="dataset1"></bar-chart> 
    <bar-chart [data]="dataset2"></bar-chart> 
    `, 
}) 
export class App { 
    dataset1 = [ ... ]; 
    dataset2 = [ ... ]; 
} 

這裏是Plunkr