Ng7 - GoJs npm better visualization chart better than D3

Ng7 - GoJs npm better visualization chart better than D3

----------------------------         -----------------------------



npm install gojs --save

it will install gojs version 2.0.0 latest in mar2019

no need to add anything in module

component.html
---------------
<div #myDiagramDiv style="width:100%; height:450px; background-color: #DAE4E4;"></div>

component.ts
-----------------

import { Component, OnInit, AfterViewInit,ViewChild, ElementRef, Input, Output, EventEmitter} from '@angular/core';
import * as go from 'gojs';
import { GuidedDraggingTool } from 'gojs/extensionsTS/GuidedDraggingTool';
@Component({
  selector: 'chart-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.less']
})
export class MainComponent implements  OnInit, AfterViewInit {

ngOnInit(){
}

@ViewChild('myDiagramDiv') div;
   ngAfterViewInit(){
    // create a make type from go namespace and assign it to MAKE
    const MAKE = go.GraphObject.make;

    // get the div in the HTML file
    const diagramDiv = this.div.nativeElement;

    // instatiate MAKE with Diagram type and the diagramDiv
    const myDiagram = MAKE(go.Diagram, diagramDiv,  // create a Diagram for the DIV HTML element
      {
        initialAutoScale: go.Diagram.Uniform,  // an initial automatic zoom-to-fit
        contentAlignment: go.Spot.Center,  // align document to the center of the viewport
        layout:
          MAKE(go.ForceDirectedLayout,  // automatically spread nodes apart
            { maxIterations: 200, defaultSpringLength: 30, defaultElectricalCharge: 100 })
      });
  // define each Node's appearance
  myDiagram.nodeTemplate =
    MAKE(go.Node, "Auto",  // the whole node panel
      { locationSpot: go.Spot.Center },
      // define the node's outer shape, which will surround the TextBlock
      MAKE(go.Shape, "Rectangle",
        { fill: MAKE(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }), stroke: "black" }),
      MAKE(go.TextBlock,
        { font: "bold 10pt helvetica, bold arial, sans-serif", margin: 4 },
        new go.Binding("text", "text"))
    );
  // replace the default Link template in the linkTemplateMap
  myDiagram.linkTemplate =
    MAKE(go.Link,  // the whole link panel
      MAKE(go.Shape,  // the link shape
        { stroke: "black" }),
      MAKE(go.Shape,  // the arrowhead
        { toArrow: "standard", stroke: null }),
      MAKE(go.Panel, "Auto",
        MAKE(go.Shape,  // the label background, which becomes transparent around the edges
          { fill: MAKE(go.Brush, "Radial", { 0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240, 0)" }),
            stroke: null }),
        MAKE(go.TextBlock,  // the label text
          { textAlign: "center",
            font: "10pt helvetica, arial, sans-serif",
            stroke: "#555555",
            margin: 4 },
          new go.Binding("text", "text"))
      )
    );
  // create the model for the concept map
  var nodeDataArray = [
    { key: 1, text: "Concept Maps" },
    { key: 2, text: "Organized Knowledge" },
    { key: 3, text: "Context Dependent" },
    { key: 4, text: "Concepts" },
    { key: 5, text: "Propositions" },
    { key: 6, text: "Associated Feelings or Affect" },
    { key: 7, text: "Perceived Regularities" },
    { key: 8, text: "Labeled" },
    { key: 9, text: "Hierarchically Structured" },
    { key: 10, text: "Effective Teaching" },
    { key: 11, text: "Crosslinks" },
    { key: 12, text: "Effective Learning" },
    { key: 13, text: "Events (Happenings)" },
    { key: 14, text: "Objects (Things)" },
    { key: 15, text: "Symbols" },
    { key: 16, text: "Words" },
    { key: 17, text: "Creativity" },
    { key: 18, text: "Interrelationships" },
    { key: 19, text: "Infants" },
    { key: 20, text: "Different Map Segments" }
  ];
  var linkDataArray = [
    { from: 1, to: 2, text: "represent" },
    { from: 2, to: 3, text: "is" },
    { from: 2, to: 4, text: "is" },
    { from: 2, to: 5, text: "is" },
    { from: 2, to: 6, text: "includes" },
    { from: 2, to: 10, text: "necessary\nfor" },
    { from: 2, to: 12, text: "necessary\nfor" },
    { from: 4, to: 5, text: "combine\nto form" },
    { from: 4, to: 6, text: "include" },
    { from: 4, to: 7, text: "are" },
    { from: 4, to: 8, text: "are" },
    { from: 4, to: 9, text: "are" },
    { from: 5, to: 9, text: "are" },
    { from: 5, to: 11, text: "may be" },
    { from: 7, to: 13, text: "in" },
    { from: 7, to: 14, text: "in" },
    { from: 7, to: 19, text: "begin\nwith" },
    { from: 8, to: 15, text: "with" },
    { from: 8, to: 16, text: "with" },
    { from: 9, to: 17, text: "aids" },
    { from: 11, to: 18, text: "show" },
    { from: 12, to: 19, text: "begins\nwith" },
    { from: 17, to: 18, text: "needed\nto see" },
    { from: 18, to: 20, text: "between" }
  ];
  myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

}
}