switched from 2d to svg

src/app/app.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { Config } from './models/config.model';
-import * as d3 from 'd3';
 
 @Component({
   selector: 'app-root',

src/app/canvas/canvas.directive.ts

@@ -1,18 +1,26 @@
+import { Point } from './../models/point.model';
 import { Directive, ElementRef, Renderer, AfterViewInit, HostListener, Output, EventEmitter, OnInit } from '@angular/core';
 import { Config } from './../models/config.model';
+import * as d3 from 'd3';
 
 @Directive({
   selector: '[appCanvas]'
 })
 export class CanvasDirective implements OnInit {
   private canvas: any;
-  private context: any;
+  private svg: any;
   public config: Config;
 
   @Output() emitConfig: EventEmitter<Config>;
   @HostListener('window:resize', ['$event'])
   private onResize(event) {
     this.updateConfig();
+
+    if (this.svg) {
+      this.updateSvg();
+    } else {
+      this.initSvg();
+    }
   }
 
   constructor(
@@ -20,12 +28,39 @@ export class CanvasDirective implements OnInit {
     private renderer: Renderer
   ) {
     this.canvas = el.nativeElement;
-    this.context = this.canvas.getContext('2d');
     this.emitConfig = new EventEmitter();
   }
 
   ngOnInit() {
     this.updateConfig();
+    this.initSvg();
+    this.render();
+  }
+
+  private initSvg() {
+    this.svg = d3.select(this.canvas).append('svg')
+      .attr('width', this.config.width)
+      .attr('height', this.config.height);
+  }
+
+  private updateSvg() {
+    this.svg
+      .attr('width', this.config.width)
+      .attr('height', this.config.height);
+  }
+
+  private render() {
+    this.drawLine([
+      this.config.start,
+      this.config.end
+    ]);
+  }
+
+  private drawLine(points: Point[]) {
+    // d3.line()
+    //   .x(function(d) { return x(d.date); })
+    //   .y(function(d) { return y(d.value); })
+    //   .curve(d3.curveCatmullRom.alpha(0.5));
   }
 
   private updateConfig(): void {
@@ -41,7 +76,7 @@ export class CanvasDirective implements OnInit {
         y: this.canvas.clientHeight
       },
     };
-    // Emit Config to parent Component
+    // Emit Canvas Config to parent Component
     this.emitConfig.next(this.config);
   }
 }