Question

我已经使用Angular7和d3.js。现在，我想使用d3-graphviz（https://www.npmjs.com/package/d3-graphviz）或viz.js（https://github.com/mdaines/viz.js）或其他可以显示DOT图形的东西。

所有方法均无效。而且我在网上找不到任何提示。现在，我需要一些帮助才能使其在我的App中运行。

例如： -什么npm包？ -哪个配置？（angular.json，标签或只是“导入为..”） -和/或一个小的工作示例，例如：

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

我非常感谢您的任何提示。如果有人已经对其进行管理可以提供帮助。

我已经尝试了文档中显示的任何方法，以及在Angular中使用本机JS库的组合。

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

只需要在我的有角度的Web应用程序中查看Graphviz图即可。

Answer 1

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。

如何在angular中集成graphviz

1 个答案: