web-dev-qa-db-fra.com

Comment faire de vis.js lib pour travailler avec Angular2?

J'essaie d'utiliser un visjs lib mais je ne peux pas faire fonctionner leur exemple de démarrage, cela va comme ceci:

<script type="text/javascript">
    // DOM element where the Timeline will be attached
    var container = document.getElementById('visualization');

    // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([
        {id: 1, content: 'item 1', start: '2013-04-20'},
        {id: 2, content: 'item 2', start: '2013-04-14'},
        {id: 3, content: 'item 3', start: '2013-04-18'},
        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ]);

    // Configuration for the Timeline
    var options = {};

    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);
</script>
angularangular2-templatevis.jsvis.js-timeline
8
CommonSenseCode

Voici un outil simple intégrant le code que vous avez posté avec Angular 2 https://plnkr.co/edit/TbPTfXFk4RSAuPn4BBxP?p=preview

Dans cet exemple l'intégration est dans OnInit

ngOnInit() {
    var container = document.getElementById('visualization');

    // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([
        {id: 1, content: 'item 1', start: '2013-04-20'},
        {id: 2, content: 'item 2', start: '2013-04-14'},
        {id: 3, content: 'item 3', start: '2013-04-18'},
        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ]);

    // Configuration for the Timeline
    var options = {};

    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);
  }
9
TGH

Veuillez trouver ci-dessous le code qui utilise angular2 avec vis et il vous suffit d'installer vis et de l'importer. Dans cet exemple, j'ai créé un composant angular2 pour la bibliothèque vis.

import { Component , OnInit, OnDestroy } from '@angular/core';
import { Network, DataSet, Node, Edge, IdType } from 'vis';
@Component({
  selector: 'network-graph',
  templateUrl: './network-graph.component.html'
})
export class NetworkGraphComponent implements OnInit{
    public nodes: Node;
    public edges: Edge;
    public network : Network;

    public ngOnInit(): void {
          var nodes = new DataSet([
              {id: 1, label: 'Node 1'},
              {id: 2, label: 'Node 2'},
              {id: 3, label: 'Node 3'},
              {id: 4, label: 'Node 4'},
              {id: 5, label: 'Node 5'}
          ]);
            // create an array with edges
            var edges = new DataSet([
              {from: 1, to: 3},
              {from: 1, to: 2},
              {from: 2, to: 4},
              {from: 2, to: 5},
              {from: 3, to: 3}
            ]);
           // create a network
          var container = document.getElementById('mynetwork');
          var data = {
            nodes: nodes,
            edges: edges
          };
          var options = {};
          var network = new Network(container, data, options);
    }
}
14
meenu1meen

Utiliser des directives angulaires serait une approche propre pour résoudre ce problème. Commençons par installer vis.js

npm install vis

Le composant qui affiche le graphique vis devrait avoir un élément conteneur pour le graphique., Disons 

graph-visualization.component.html 

<div [appGraphVis]="graphData" class="graph-container"></div>

graph-visualization.component.css 

.graph-container {
    height: 25em;
    widows: 100%;
}

graph-visualization.component.ts

import { Component, OnInit } from '@angular/core';
import { DataSet } from 'vis';

@Component({
  selector: 'app-graph-visualization',
  templateUrl: './graph-visualization.component.html',
  styleUrls: ['./graph-visualization.component.css']
})
export class GraphVisualizationComponent {
  graphData = {};

  constructor() { }

  ngAfterContentInit(){
    // create an array with nodes
    var nodes = new DataSet([
      {id: 1, label: 'Node 1'},
      {id: 2, label: 'Node 2'},
      {id: 3, label: 'Node 3'},
      {id: 4, label: 'Node 4'},
      {id: 5, label: 'Node 5'}
    ]);

    // create an array with edges
    var edges = new DataSet([
      {from: 1, to: 3},
      {from: 1, to: 2},
      {from: 2, to: 4},
      {from: 2, to: 5}
    ]);

    // provide the data in the vis format
    this.graphData["nodes"] = nodes;
    this.graphData["edges"] = edges;
  }

}

Remarquez quelques petites choses:

  • ce composant ne calcule que les données à visualiser et ne fait rien, comme la manipulation du DOM ou l'utilisation directe de vis.js. Puisque vis.js est une manipulation DOM, nous pourrions avoir une directive qui la gère
  • Utilisé ngAfterContentInit plutôt que ngOnInit. Cela retardera la génération de graphe et permettra à d’autres tâches liées au DOM de se terminer.

graphvis.directive.ts

import { Directive, TemplateRef, ViewContainerRef, Input, Renderer2, ElementRef } from '@angular/core';
import { Network } from 'vis';

@Directive({
  selector: '[appGraphVis]'
})
export class GraphVisDirective {
  network;

  constructor(private el: ElementRef) {}

  @Input() set appGraphVis(graphData){
    console.log('graph data ', graphData);
    var options = {};

    if(!this.network){
      this.network = new Network(this.el.nativeElement, graphData, options);
    }

  }

}

Pour simplifier, j'ai gardé les options à l'intérieur de la directive. Dans le monde réel, les options seront passées comme une autre entrée de composant de haut niveau.

Des notes supplémentaires, nous pourrions ajouter les types de TypeScript pour vis pour aider lors du développement et le débogage. C'est disponible ici:

yarn add @types/vis -D

Si vous recherchez une solution prête à l'emploi, consultez cette bibliothèque - angular-vis . Au moment où j'écris ceci, il ne supporte pas toutes les fonctionnalités de vis.js

6
Sairam Krish

Eh bien, il faut apporter quelques modifications au code proposé ci-dessus, ce qui m'a pris du temps à contourner ... alors je les partage: 

1) vous devez accéder au conteneur par @ViewChild ('netWords') netContainer: ElementRef; et #netWords dans la partie html. 

2) vous devez accéder pleinement à l'élément conteneur à l'aide de la propriété nativeElement, ce qui donne this.network = new Vis.Network (this.netContainer.nativeElement, data, options);

Cela devrait fonctionner avec ces modifications. 

1
Marc