added starting and ending points

src/app/app.component.html

@@ -1,4 +1,4 @@
-<canvas appCanvas (emitConfig)="updateCanvasConfig($event)"></canvas>
+<div class="canvas" appCanvas (emitConfig)="updateCanvasConfig($event)"></div>
 
 <ul *ngIf="canvasConfig">
   <li><pre>{{canvasConfig | json}}</pre></li>

src/app/app.component.scss

@@ -1,9 +1,10 @@
-canvas {
+.canvas {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
+  overflow: hidden;
 }
 
 ul {

src/app/canvas/canvas.directive.ts

@@ -1,7 +1,7 @@
 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 { select } from 'd3-selection';
+import { select, selectAll } from 'd3-selection';
 
 @Directive({
   selector: '[appCanvas]'
@@ -14,13 +14,7 @@ export class CanvasDirective implements OnInit {
   @Output() emitConfig: EventEmitter<Config>;
   @HostListener('window:resize', ['$event'])
   private onResize(event) {
-    this.updateConfig();
+    this.init();
-
-    if (this.svg) {
-      this.updateSvg();
-    } else {
-      this.initSvg();
-    }
   }
 
   constructor(
@@ -32,13 +26,20 @@ export class CanvasDirective implements OnInit {
   }
 
   ngOnInit() {
+    this.init();
+  }
+
+  private init() {
     this.updateConfig();
     this.initSvg();
     this.render();
   }
 
   private initSvg() {
-    this.svg = select(this.canvas).append('svg')
+    if (!this.svg) {
+      this.svg = select(this.canvas).append('svg');
+    }
+    this.svg
       .attr('width', this.config.width)
       .attr('height', this.config.height);
   }
@@ -50,17 +51,25 @@ export class CanvasDirective implements OnInit {
   }
 
   private render() {
-    this.drawLine([
+    this.resetPoints();
+    this.drawPoints([
       this.config.start,
       this.config.end
     ]);
   }
 
-  private drawLine(points: Point[]) {
+  private resetPoints(): void {
-    // d3.line()
+    selectAll('circle').remove();
-    //   .x(function(d) { return x(d.date); })
+  }
-    //   .y(function(d) { return y(d.value); })
+
-    //   .curve(d3.curveCatmullRom.alpha(0.5));
+  private drawPoints(points: Point[]) {
+    points.forEach(point => {
+      this.svg.append('circle')
+        .attr('r', 50)
+        .attr('cx', point.x)
+        .attr('cy', point.y)
+        .attr('fill', '#971240');
+    });
   }
 
   private updateConfig(): void {