adding randomly new points

src/app/canvas/canvas.directive.ts

@@ -1,6 +1,7 @@
 import { Directive, ElementRef, Renderer, AfterViewInit, HostListener, Output, EventEmitter, OnInit, Input } from '@angular/core';
 import * as Selection from 'd3-selection';
 import * as Shape from 'd3-shape';
+import * as Random from 'd3-random';
 
 import { Config } from './../models/config.model';
 import { Point } from './../models/point.model';
@@ -14,6 +15,7 @@ export class CanvasDirective implements OnInit {
   private defs: any;
   private gradient: any;
   private svg: any;
+  private expandedPoints: Point[];
   public config: Config;
 
   @Input() param: Param;
@@ -65,15 +67,13 @@ export class CanvasDirective implements OnInit {
 
   private render() {
     this.resetPoints();
-    this.drawPoints([
+    this.expandedPoints = this.expandPoints([
       this.config.start,
       this.config.end
     ]);
+    this.drawPoints(this.expandedPoints);
     this.resetLines();
-    this.drawLine([
+    this.drawLine(this.expandedPoints);
-      this.config.start,
-      this.config.end
-    ]);
   }
 
   private resetPoints(): void {
@@ -83,16 +83,20 @@ export class CanvasDirective implements OnInit {
   private drawPoints(points: Point[]) {
     points.forEach(point => {
       this.svg.append('circle')
-        .attr('r', 50)
+        .attr('r', point.color ? 50 : 10)
         .attr('cx', point.x)
         .attr('cy', point.y)
-        .attr('fill', point.color ? point.color : 'black');
+        .attr('fill', point.color ? point.color : 'gray');
     });
   }
 
   private drawLine(points: Point[]) {
     return this.svg.append('path')
-      .attr('d', Shape.line().x(p => p.x).y(p => p.y)(points))
+      .attr('d', Shape.line()
+        .x(p => p.x)
+        .y(p => p.y)
+        .curve(Shape.curveBasis)
+        (points))
       .attr('stroke', 'url(#gradient)')
       .attr('stroke-width', 4)
       .attr('fill', 'none');
@@ -102,6 +106,37 @@ export class CanvasDirective implements OnInit {
     Selection.selectAll('path').remove();
   }
 
+  private expandPoints(points: Point[]) {
+    const newPoints: Point[] = [];
+    const matrix = {
+      min: {
+        x: points.reduce((a, b) => a.x < b.x ? a : b).x,
+        y: points.reduce((a, b) => a.y < b.y ? a : b).y,
+      },
+      max: {
+        x: points.reduce((a, b) => a.x > b.x ? a : b).x,
+        y: points.reduce((a, b) => a.y > b.y ? a : b).y,
+      }
+    };
+
+    points.splice(1, 0, this.generateRandomPoint(matrix));
+    points.splice(1, 0, this.generateRandomPoint(matrix));
+    points.splice(1, 0, this.generateRandomPoint(matrix));
+
+    return points;
+  }
+
+  private calcDelta(a: Point, b: Point) {
+    return Math.pow(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2), 0.5);
+  }
+
+  private generateRandomPoint(matrix) {
+    return {
+      x: Random.randomUniform(matrix.min.x, matrix.max.x)(),
+      y: Random.randomUniform(matrix.min.y, matrix.max.y)()
+    };
+  }
+
   private updateConfig(): void {
     this.config = {
       width: this.canvas.clientWidth,