content-tree.component.ts

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

@Component({
  selector: 'app-content-tree',
  template: `<svg></svg>`,
  styleUrls: ['./content-tree.component.css'],
})
export class ContentTreeComponent implements OnInit {
  private d3: D3;
  private parentNativeElement: any;
  private data: any = {
    "name": "Top Level",
    "parent": "null",
    "children": [
      {
        "name": "Level 2: A",
        "parent": "Top Level",
        "children": [
          {
            "name": "Son of A",
            "parent": "Level 2: A"
          },
          {
            "name": "Daughter of A",
            "parent": "Level 2: A"
          }
        ]
      },
      {
        "name": "Level 2: B",
        "parent": "Top Level"
      }
    ]
  };

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

  ngOnInit() {
    let d3 = this.d3;
    let d3ParentElement: Selection<any, any, any, any>;
    if (this.parentNativeElement !== null) {
      d3ParentElement = d3.select(this.parentNativeElement);
      let svg = d3ParentElement.select<SVGSVGElement>('svg');
      let width: number = parseInt(svg.attr("width"));
      let height: number = parseInt(svg.attr("height"));
      let g: Selection<SVGGElement, any, null, undefined>;

      let tree = d3.cluster()
        .size([height, width - 160]);
      let stratify = d3.stratify()
        .parentId(function (d) { return d['id'].substring(0, d['id'].lastIndexOf(".")); });
      let root = d3.hierarchy(this.data);
      tree(root);
      g = svg.append<SVGGElement>("g").attr("transform", "translate(60,0)");
      let link = g.selectAll<SVGPathElement, any>(".link")
        .data(root.descendants().slice(1))
        .enter().append<SVGPathElement>("path")
        .attr("class", "link")
        .attr("d", function (d) {
          return "M" + d['y'] + "," + d['x']
            + "C" + (d.parent['y'] + 100) + "," + d['x']
            + " " + (d.parent['y'] + 100) + "," + d.parent['x']
            + " " + d.parent['y'] + "," + d.parent['x'];
        });
      console.log(root.descendants());
      let node = g.selectAll<SVGGElement, any>(".node")
        .data(root.descendants())
        .enter().append <SVGGElement>("g")
        .attr("class", function (d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
        .attr("transform", function (d) {
          return "translate(" + d['y'] + "," + d['x'] + ")";
        })

      node.append<SVGCircleElement>("circle")
        .attr("r", 2.5);

      node.append<SVGTextElement>("text")
        .attr("dy", 3)
        .attr("x", function (d) { return d.children ? -8 : 8; })
        .style("text-anchor", function (d) { return d.children ? "end" : "start"; })
        .text(function (d) {
          return d.data.name;
        });
    }
  }  
}