Question

我有一个水平条形图组件，它接受数据@Input，然后由图表库let spriteCategory : UInt32 = 0x1 << 0 . . . let enemyPolyCategory : UInt32 = 0x1 << 8使用：

horizontalBarChart

内部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>选择图表库中的给定ID：

d3

现在我想在组件页面中生成多个条形图，每个条形图都有不同的数据：

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

问题是两个图表都是在FIRST组件的<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

但是我想知道是否有更多的Angular2解决方法，可能使用<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>或其他东西。

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

使用相同Angular2组件的页面上的多个d3图表

1 个答案: