Как интегрировать графвиз в угловой - PullRequest
Новая
       14

Как интегрировать графвиз в угловой

0 голосов
/ 03 июля 2019

Я использую уже Angular7 и d3.js. Теперь я хотел бы использовать d3-graphviz (https://www.npmjs.com/package/d3-graphviz) или viz.js (https://github.com/mdaines/viz.js)) или что-то еще, что работает для отображения DOT-графиков.

Ни один из подходов не работает. И я не могу найти никаких подсказок в Интернете. Теперь мне нужно немного помочь, как запустить его в моем приложении.

например: -что пакет в минуту? -Какие конфиги? (angular.json, тег или просто "импортировать как ..") и / или небольшой рабочий пример, такой как: 

        d3g
        .graphviz(d3.select(this.svg.nativeElement))
        .renderDot('digraph {a -> b}');

Я благодарен за любую подсказку. Это помогло бы, если бы кто-то уже управлял этим, чтобы заставить это бежать.

Я уже попробовал любой подход, показанный в документации, и комбинацию использования нативных библиотек JS в Angular. 

import * as d3 from 'd3';
import * as d3g from 'd3-graphviz';

...
d3g
    .graphviz(d3.select(this.svg.nativeElement))
    .renderDot('digraph {a -> b}');

OR

d3
    .select(this.svg.nativeElement)
    .graphviz()
    .renderDot('digraph {a -> b}');

Просто нужно увидеть диаграмму Graphviz в моем угловом веб-приложении.

1 Ответ

0 голосов
/ 05 июля 2019 
import { Component } from '@angular/core';

import { graphviz }  from 'd3-graphviz';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'd3-graphviz in Angular';

  ngOnInit() {
    graphviz('div').renderDot('digraph {a -> b}');
  }
}

См. https://github.com/magjac/d3-graphviz-angular для полного примера.

...