如何使 vis.js lib 与 Angular2 一起工作？

Question

我正在尝试使用visjs lib，但无法让他们的入门示例工作，如下所示：

<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>

Answer 1

请在下面找到使用angular2 和vis 的代码，您只需要安装vis 并导入它。 在这个例子中，我为 vis 库创建了一个 angular2 组件。

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);
    }
}

Answer 2

这是一个简单的 plunker，集成了您使用 Angular 2 发布的代码 https://plnkr.co/edit/TbPTfXFk4RSAuPn4BBxP?p=preview

在本例中，集成在 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);
  }

Answer 3

使用角度指令将是解决此问题的一种简洁方法。让我们从安装 vis.js 开始

npm install vis

显示 vis 图表的组件应该有一个图表的容器元素。比方说

图形可视化.component.html

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

图形可视化.component.css

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

图形可视化.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;
  }

}

注意几点：

• 这个组件只计算需要可视化的数据，它不做任何事情，比如操作 DOM 或直接使用 vis.js。由于 vis.js 是一个 DOM 操作，我们可以有一个指令来处理它
• 使用 ngAfterContentInit 而不是 ngOnInit。这将延迟图形生成部分并允许其他 DOM 相关任务完成

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);
    }

  }

}

为简单起见，我将选项保留在指令中。在现实世界中，选项将作为来自高级组件的另一个输入传递。

附加说明，我们可以为 vis 添加 typescript 的类型以在开发和调试过程中提供帮助。可以在这里找到：

yarn add @types/vis -D

如果您正在寻找即用型解决方案，请查看此库 - angular-vis。在撰写本文时，它并不支持 vis.js 的所有功能

Answer 4

嗯，上面提出的代码需要一些修改，这让我花了一段时间才绕过......所以我分享这些：

1) 需要在html部分通过@ViewChild('netWords') netContainer: ElementRef; 和#netWords 来访问容器。

2) 您需要使用 nativeElement 属性完全访问容器元素，所以这将是 this.network = new Vis.Network(this.netContainer.nativeElement, data, options);

它应该适用于这些修改。