d3-circle-packing-all-in-one.component.ts

@Component({
  selector: 'd3-circle-packing-all-in-one',
  templateUrl: './d3-circle-packing-all-in-one.component.html',
  styleUrls: ['./d3-circle-packing-all-in-one.component.css'],
})
export class D3CirclePackingAllInOneComponent implements OnInit, OnDestroy {

  @Input() url: string;
  private d3: D3;
  private parentNativeElement: any;
  private d3Svg: Selection<SVGSVGElement, any, null, undefined>;

  constructor(private http: Http, element: ElementRef, d3Service: D3Service) {
    this.d3 = d3Service.getD3();
    this.parentNativeElement = element.nativeElement;
  }

  ngOnInit() {
    const d3 = this.d3;

    if (this.parentNativeElement == null) {
      return;
    }

    const stratify = d3.stratify()
      .id((d: HierarchyPointNode<any>) => (<any>d).name)
      .parentId((d: HierarchyPointNode<any>) => (<any>d).name.substring(0, (<any>d).name.lastIndexOf(".")));

    const processData = function (root: HierarchyNode<any>) {
      //This is where we render the canvas
    };

    this.http.get('./assets/' + this.url).map(res => {
      const rawData = res['_body'] || '';
      const data = this.d3.csvParse(rawData);

      return stratify(data)
        .sum((d: HierarchyPointNode<any>) => d.value)
        .sort((a, b) => b.value - a.value);
    }).subscribe(root => processData(root));
  }
}