Angular2D3.ts

import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input } from '@angular/core';
import {D3Service, D3, Selection} from 'd3-ng2-service';

@Component({
  selector: 'app-chart',
  templateUrl: '.chart.component.html',
  styleUrls: ['./chart.component.scss']
})
export class ChartComponent  implements OnInit, OnChanges {

  @ViewChild('chart') private chartContainer: ElementRef;
  @Input() private data: Array<any>;

  private d3: D3;
  private margin: any = { top: 20, bottom: 20, left: 20, right: 20};
  private chart: any;
  private width: number;
  private height: number;

  constructor(d3Service: D3Service) {
    this.d3 = d3Service.getD3();
  }

  ngOnInit() {
    this.createChart();
  }

  ngOnChanges() {
    if (this.chart) {
      this.updateChart();
    }
  }

  createChart(){
    let element = this.chartContainer.nativeElement;
    this.width = element.offsetWidth - this.margin.left - this.margin.right - 50;
    this.height = element.offsetHeight - this.margin.top - this.margin.bottom;

    let svg = this.d3.select(element).append('svg')
      .attr('width', '100%')
      .attr('height', 400);

    let dataArray = [5,11,8];

    svg.selectAll('rect')
      .data(dataArray)
      .enter()
      .append('rect')
      .attr('height', function (d,i) {  return d*15;})
      .attr('width', '50')
      .attr('fill', 'pink')
      .attr('x', function(d,i){return 100 + 60*i; })
      .attr('y', function(d,i){return 300 - (d*15); });

    var nx = 350;
    svg.selectAll('circle')
      .data(dataArray)
      .enter().append('circle')
              .attr('cx',function(d,i){nx+= d*6 + i*20; return nx;})
              .attr('cy','100')
              .attr('r',function (d) {
                return d*3;
              });
   
  }

}