How to render from dot files with d3-graphviz in Angular?

user_19143928 0
Viewed 135

using d3-graphviz in angular, I can render a simple graphviz graph if I input it as a string like the below. But I would like to read in graphs from a dot file instead. Does anyone know what the correct way to do this is?

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}');
  }
}
d3.js angular graphviz
1 Answers

You could use the HttpClient for this and inject it in your component by specifying it like this in the components constructor private _http: HttpClient.

Then you simple get a files content by subscribing like this:

this._http.get('assets/graph.dot', {responseType: 'text'})
        .subscribe(graphData=> graphviz('div').renderDot(graphData));
user_131814870
Related