Graphviz:ノードの属性の指定
d3.css/* */d3.jsd3.select("#graph").graphviz()
.fade(false)
.renderDot(d3.js`
digraph G{
graph [label = "ノードの属性の指定"];
A[shape = box];
B[fixedsize = true,width = 1.7,height = 0.8];
C[style = dashed];
D[peripheries = 3];
E[shape = box, label = "E または 0x45"];
A -> B;
A -> C;
B -> D;
D -> E;
}
`d3.js );ノードの形（shape）
shapeはノードの形を変える
ノードの大きさ（fixedsize、width、height）
サイズの変更は、fixedsize=trueを指定してから、縦（height）と横（width）の指定する
ノードの線の種類（style、peripheris）
styleで、囲む線の種類を指定できる
peripheris はn重線（二重線、三重線、…）を書ける
ノードの色（color、fillcolor）
colorは線の色
fillcolorは塗りつぶす色
fillcolorを使うには、style = filledを指定する
ノードのラベル（label）
label は、表示される文字列を変更できる
\nで改行、\rで右揃え、\lで左揃え
vizScript.jsconst graph = `
digraph G{
graph [label = "ノードの属性の指定"];
A[shape = box];
B[fixedsize = true,width = 1.7,height = 0.8];
C[style = dashed];
D[peripheries = 3];
E[shape = box, label = "E または 0x45"];
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);
});