d3-circle-packing-renderer.component.ts

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

  private d3: D3;
  private parentNativeElement: any;
  private d3Svg: Selection<SVGSVGElement, any, null, undefined>;

  @Input() root: Observable<HierarchyNode<any>>;

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

  ngOnInit() {
    const d3 = this.d3;

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

    const processData = function (root: HierarchyNode<any>) {
      //Render the canvas
    };

    this.root.subscribe(root => processData(root));
  }
}

flare-csv.service.ts

@Injectable()
export class FlareCsvService implements HierarchicalData {

  private d3: D3;
  private stratify;

  constructor(private http: Http, d3Service: D3Service, private url: string) {
    this.d3 = d3Service.getD3();
    this.stratify = this.d3.stratify()
      .id((d: HierarchyPointNode<any>) => (<any>d).name)
      .parentId((d: HierarchyPointNode<any>) => (<any>d).name.substring(0, (<any>d).name.lastIndexOf(".")));
  }


  getRoot(): Observable<HierarchyNode<any>> {
    return this.http.get('./assets/' + this.url).map(res => {
      const rawData = res['_body'] || '';
      const data = this.d3.csvParse(rawData);

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