Graphviz:ノードの属性の指定

code:d3.css

/* */

code:d3.js

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

.fade(false)

.renderDot(

code:d3.js

`

digraph G{

A -> B;

A -> C;

B -> D;

D -> E;

}

`

code:d3.js

);

ノードの形（shape）

shapeはノードの形を変える

ノードの大きさ（fixedsize、width、height）

ノードの線の種類（style、peripheris）

styleで、囲む線の種類を指定できる

peripheris はn重線（二重線、三重線、…）を書ける

ノードの色（color、fillcolor）

colorは線の色

fillcolorは塗りつぶす色

fillcolorを使うには、style = filledを指定する

ノードのラベル（label）

label は、表示される文字列を変更できる

\nで改行、\rで右揃え、\lで左揃え

code:vizScript.js

const graph = `

digraph G{

A -> B;

A -> C;

B -> D;

D -> E;

}

`;

const viz = new Viz();

viz.renderSVGElement(graph)

.then(function(element) {

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

editor.appendChild(element);

});