Graphviz:有向グラフ

code:d3.css

/* */

code:d3.js

d3.select("#graph").graphviz()

.fade(false)

.renderDot(

code:d3.js

`

digraph g {

A -> B ;

B -> C ;

C -> A ;

}

`

JavaScriptのテンプレートリテラル「`」で囲う

digraph g {}で、gという名前の有向グラフを作成する

ノードはA、B、Cである

向きがあるので、エッジの左右のノードを入れ替えると、意味が変わる

code:d3.js

);

code:vizScript.js

const graph = `

digraph g {

A -> B ;

B -> C ;

C -> A ;

}

`;

const viz = new Viz();

viz.renderSVGElement(graph)

.then(function(element) {

const editor = document.getElementById('editor');

editor.appendChild(element);

});